/* ==========================================================
   OZAN OZKAN — HOME ONLY
   Controlled Aldena-inspired enrichments.
   This file NEVER styles original inner pages.
   ========================================================== */

:root {
  --oz-rich-ease:
    cubic-bezier(.16,1,.3,1);
}


/* ==========================================================
   1. NOVA GRID — 12 IMAGES
   Existing layout remains intact.
   ========================================================== */

.oz-nova-grid {
  grid-auto-flow: row dense;
}


/* row 1 */
.oz-nova-grid
.oz-nova-card:nth-child(1) {
  grid-column: span 7;
  grid-row: span 6;
}

.oz-nova-grid
.oz-nova-card:nth-child(2) {
  grid-column: span 5;
  grid-row: span 6;
}


/* row 2 */
.oz-nova-grid
.oz-nova-card:nth-child(3),
.oz-nova-grid
.oz-nova-card:nth-child(4),
.oz-nova-grid
.oz-nova-card:nth-child(5) {
  grid-column: span 4;
  grid-row: span 4;
}


/* row 3 */
.oz-nova-grid
.oz-nova-card:nth-child(6) {
  grid-column: span 5;
  grid-row: span 5;
}

.oz-nova-grid
.oz-nova-card:nth-child(7) {
  grid-column: span 7;
  grid-row: span 5;
}


/* row 4 */
.oz-nova-grid
.oz-nova-card:nth-child(8) {
  grid-column: span 3;
  grid-row: span 4;
}

.oz-nova-grid
.oz-nova-card:nth-child(9) {
  grid-column: span 6;
  grid-row: span 4;
}

.oz-nova-grid
.oz-nova-card:nth-child(10) {
  grid-column: span 3;
  grid-row: span 4;
}


/* row 5 */
.oz-nova-grid
.oz-nova-card:nth-child(11) {
  grid-column: span 8;
  grid-row: span 5;
}

.oz-nova-grid
.oz-nova-card:nth-child(12) {
  grid-column: span 4;
  grid-row: span 5;
}


/* ==========================================================
   Cleaner labels
   ========================================================== */

.oz-nova-card figcaption {
  opacity: 0;

  transform:
    translateY(8px);

  transition:
    opacity .45s ease,
    transform .6s var(--oz-rich-ease);
}

.oz-nova-card:hover
figcaption {
  opacity: .88;

  transform:
    translateY(0);
}


/* ==========================================================
   2. SERVICES02-LIKE INSET HOVER
   ONLY explicitly marked environment/art cards.
   No portraits.
   No global figures.
   No layout shift.
   ========================================================== */

.oz-inset-hover {
  background:
    #171613;
}

.oz-inset-hover > img {
  inset: 0;

  width: 100%;
  height: 100%;

  transition:
    inset .62s var(--oz-rich-ease),
    width .62s var(--oz-rich-ease),
    height .62s var(--oz-rich-ease),
    filter .62s ease !important;

  transform:
    none !important;
}

.oz-inset-hover:hover > img {
  inset: 16px;

  width:
    calc(100% - 32px);

  height:
    calc(100% - 32px);

  filter:
    saturate(.92)
    contrast(1.02);
}

/*
  Existing gradient follows the image experience
  but does not resize the actual card.
*/

.oz-inset-hover::after {
  transition:
    opacity .5s ease;
}

.oz-inset-hover:hover::after {
  opacity:
    .55;
}


/* ==========================================================
   3. SIGNATURE STATEMENT
   "Great works starts here" role, but Ozan's own language.
   ========================================================== */

.oz-signature-statement {
  position: relative;

  min-height:
    min(900px,90vh);

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  background:
    #11110f;

  color:
    #f1ece2;

  padding:
    8vw 4vw;
}

.oz-signature-statement::before {
  content: "";

  position:
    absolute;

  top:
    0;

  left:
    4vw;

  right:
    4vw;

  height:
    1px;

  background:
    rgba(255,255,255,.18);
}

.oz-signature-inner {
  position:
    relative;

  z-index:
    2;

  width:
    100%;
}

.oz-signature-index {
  display:
    block;

  margin-bottom:
    clamp(28px,4vw,65px);

  font-size:
    9px;

  line-height:
    1;

  letter-spacing:
    .23em;

  text-transform:
    uppercase;

  opacity:
    .48;
}

.oz-signature-statement h2 {
  margin:
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(70px,12.2vw,190px);

  font-weight:
    400;

  line-height:
    .79;

  letter-spacing:
    -.07em;
}

.oz-signature-statement
h2 > span {
  display:
    block;

  overflow:
    hidden;

  padding-bottom:
    .08em;

  opacity:
    0;

  transform:
    translateY(110%);

  filter:
    blur(7px);

  transition:
    opacity .9s ease,
    transform 1.25s var(--oz-rich-ease),
    filter 1.15s var(--oz-rich-ease);
}

.oz-signature-statement
h2 > span:nth-child(2) {
  margin-left:
    11vw;

  transition-delay:
    .12s;
}

.oz-signature-statement
.is-visible > span,
.oz-signature-statement
h2.is-visible > span {
  opacity:
    1;

  transform:
    translateY(0);

  filter:
    blur(0);
}


/* subtle line — no particle circus */

.oz-signature-statement::after {
  content: "";

  position:
    absolute;

  width:
    45vw;

  height:
    45vw;

  max-width:
    680px;

  max-height:
    680px;

  right:
    -14vw;

  bottom:
    -23vw;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    50%;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media
(max-width:900px) {

  .oz-nova-grid
  .oz-nova-card:nth-child(n) {
    grid-column:
      span 1;

    grid-row:
      span 1;
  }

  .oz-nova-grid
  .oz-nova-card:nth-child(1) {
    grid-column:
      span 2;

    grid-row:
      span 2;
  }

  .oz-signature-statement {
    min-height:
      650px;
  }

  .oz-signature-statement
  h2 > span:nth-child(2) {
    margin-left:
      5vw;
  }

}


/* ==========================================================
   MOBILE
   No inset hover; touch interface does not need it.
   ========================================================== */

@media
(max-width:560px) {

  .oz-inset-hover:hover > img {
    inset:
      0;

    width:
      100%;

    height:
      100%;
  }

  .oz-nova-card
  figcaption {
    opacity:
      .82;

    transform:
      none;
  }

  .oz-signature-statement {
    min-height:
      540px;

    padding:
      75px 18px;
  }

  .oz-signature-statement
  h2 {
    font-size:
      clamp(
        58px,
        19vw,
        100px
      );

    line-height:
      .83;
  }

  .oz-signature-statement
  h2 > span:nth-child(2) {
    margin-left:
      0;
  }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media
(prefers-reduced-motion:reduce) {

  .oz-inset-hover > img,
  .oz-inset-hover:hover > img {
    transition:
      none !important;
  }

  .oz-signature-statement
  h2 > span {
    opacity:
      1 !important;

    transform:
      none !important;

    filter:
      none !important;

    transition:
      none !important;
  }

}

/* ==========================================================
   HOVER V2
   Stronger Aldena / Services02-like inset interaction
   HOME NOVA GRID ONLY
   ========================================================== */

/*
   Never changes card dimensions.
   Image retracts inward and reveals card background.
*/

.oz-nova-grid .oz-inset-hover {
  position: relative;
  overflow: hidden;
  background: #11110f;
}

.oz-nova-grid .oz-inset-hover > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  transform: none !important;

  transition:
    top .72s cubic-bezier(.16,1,.3,1),
    left .72s cubic-bezier(.16,1,.3,1),
    width .72s cubic-bezier(.16,1,.3,1),
    height .72s cubic-bezier(.16,1,.3,1),
    border-radius .72s cubic-bezier(.16,1,.3,1),
    filter .72s ease !important;
}

.oz-nova-grid .oz-inset-hover:hover > img {
  top: 24px !important;
  left: 24px !important;

  width: calc(100% - 48px) !important;
  height: calc(100% - 48px) !important;

  border-radius: 2px;

  filter:
    saturate(.93)
    contrast(1.035)
    brightness(.96) !important;
}


/* visible frame */

.oz-nova-grid .oz-inset-hover::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  border:
    1px solid
    rgba(255,255,255,.13);

  pointer-events: none;
}


/*
  Kill the old reveal curtain pseudo only for these cards,
  otherwise it can interfere visually.
*/

.oz-nova-grid
.oz-inset-hover.oz-inview::before {
  transform: none !important;
}


/* overlay follows image visually */

.oz-nova-grid
.oz-inset-hover::after {
  z-index: 2;

  transition:
    inset .72s cubic-bezier(.16,1,.3,1),
    opacity .5s ease;

  pointer-events: none;
}

.oz-nova-grid
.oz-inset-hover:hover::after {
  inset: 24px;

  opacity: .7;
}


/* caption becomes more editorial */

.oz-nova-grid
.oz-inset-hover figcaption {
  z-index: 4;

  opacity: 0;

  transform:
    translateY(10px);

  transition:
    opacity .45s ease .08s,
    transform .6s cubic-bezier(.16,1,.3,1);
}

.oz-nova-grid
.oz-inset-hover:hover figcaption {
  opacity: 1;

  transform:
    translateY(0);
}


/* small corner marker */

.oz-nova-grid
.oz-inset-hover::marker {
  display: none;
}


/* non-hover cards stay untouched */

.oz-nova-grid
.oz-nova-card:not(.oz-inset-hover) > img {
  transform: none !important;
}


/* mobile: no hover tricks */

@media (max-width: 700px) {

  .oz-nova-grid
  .oz-inset-hover:hover > img {
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;
  }

  .oz-nova-grid
  .oz-inset-hover:hover::after {
    inset: 0;
  }

  .oz-nova-grid
  .oz-inset-hover figcaption {
    opacity: .82;

    transform: none;
  }

}