/* The Details Center — home GSAP animations + homepage cursor trail
   Enqueued only on the Home and Studio pages (see functions-snippet.php).
   Every selector is namespaced with tdc- so nothing collides with Avada /
   Fusion Builder's own CSS. This file only styles the FOUR animated
   pieces — Hero, Interior assembly, Ink-mask reveal, cursor trail — not
   surrounding page content, which Cesar builds natively in Fusion Builder. */

:root{
  --tdc-bg:#F1EBE1;
  --tdc-ink:#2A2420;
  --tdc-muted:#8F8476;
  --tdc-muted-strong:#7A6F60;
  --tdc-accent:#1E2A3D;
  --tdc-accent-hover:#15202F;
  --tdc-dark:#4A342A;
  --tdc-on-dark:#F1EBE1;
  --tdc-gutter:clamp(1.25rem,5vw,4rem);
  /* oversized condensed display face for the hero headline only — everything
     else keeps Avada's own global typography (Fraunces/Hanken Grotesk).
     Loaded from Google Fonts in tdc_enqueue_home_animation_assets(). */
  --tdc-disp:"Anton","Helvetica Neue",Arial,sans-serif;
}

/* ============================================================
   1) HERO — skeleton -> building reveal + cursor crosshair
   Full-bleed: the site header is expected to float transparently over
   it (Avada header settings, out of scope for these files) and turn
   solid once scrolled past — see plan.md.
   ============================================================ */
.tdc-hero{position:relative;padding:0;height:100svh;min-height:560px;}
.tdc-hero-demo{position:absolute;inset:0;overflow:hidden;cursor:crosshair;}

/* ruler along top + left edges; cursor marks ride it once the crosshair is active */
.tdc-ruler{position:absolute;z-index:5;pointer-events:none;color:var(--tdc-muted);font-size:9px;letter-spacing:.05em;}
.tdc-ruler-top{top:0;left:0;right:0;height:20px;
  background:repeating-linear-gradient(90deg,var(--tdc-muted) 0 1px,transparent 1px 100px) left top/100% 10px no-repeat,
    repeating-linear-gradient(90deg,var(--tdc-muted) 0 1px,transparent 1px 20px) left top/100% 5px no-repeat;
  animation:tdcRulerX 5s linear 1 both;}
.tdc-ruler-left{top:0;left:0;bottom:0;width:20px;
  background:repeating-linear-gradient(180deg,var(--tdc-muted) 0 1px,transparent 1px 100px) left top/10px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--tdc-muted) 0 1px,transparent 1px 20px) left top/5px 100% no-repeat;
  animation:tdcRulerY 5s linear 1 both;}
@keyframes tdcRulerX{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes tdcRulerY{from{clip-path:inset(0 0 100% 0);}to{clip-path:inset(0 0 0 0);}}
.tdc-ruler-mark{position:absolute;z-index:6;background:var(--tdc-accent);opacity:0;pointer-events:none;transition:opacity 150ms ease;}
.tdc-ruler-mark-x{top:0;width:1px;height:16px;}
.tdc-ruler-mark-y{left:0;height:1px;width:16px;}
.tdc-ruler-tick{position:absolute;width:14px;height:14px;z-index:6;}
.tdc-ruler-tick::before,.tdc-ruler-tick::after{content:'';position:absolute;background:var(--tdc-muted);}
.tdc-ruler-tick::before{width:100%;height:1px;top:50%;left:0;}
.tdc-ruler-tick::after{width:1px;height:100%;left:50%;top:0;}
.tdc-tick-tl{top:10px;left:10px;}.tdc-tick-tr{top:10px;right:10px;}
.tdc-tick-bl{bottom:10px;left:10px;}.tdc-tick-br{bottom:10px;right:10px;}

.tdc-hlayer{position:absolute;inset:0;width:100%;height:100%;}
.tdc-hlayer picture{display:block;width:100%;height:100%;}
.tdc-hlayer img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
@media (max-aspect-ratio:15/8){.tdc-hlayer img{object-fit:contain;}}

@property --tdc-wipe{syntax:'<number>';inherits:false;initial-value:-10;}
.tdc-hlayer--skeleton{z-index:1;--tdc-wipe:-10;
  -webkit-mask-image:linear-gradient(45deg,#000 calc(var(--tdc-wipe)*1% - 12%),transparent calc(var(--tdc-wipe)*1%));
  mask-image:linear-gradient(45deg,#000 calc(var(--tdc-wipe)*1% - 12%),transparent calc(var(--tdc-wipe)*1%));
  animation:tdcSkeletonWipe 10s linear 1 forwards,tdcSkeletonFade 10s linear 1 forwards;}
.tdc-hlayer--building{z-index:2;clip-path:inset(50% 0 50% 0);animation:tdcBuildingGrow 10s linear 1 forwards;}
@keyframes tdcSkeletonFade{0%,75%{opacity:1;}88%,100%{opacity:0;}}
@keyframes tdcSkeletonWipe{0%{--tdc-wipe:-10;}50%,100%{--tdc-wipe:112;}}
@keyframes tdcBuildingGrow{0%,55%{clip-path:inset(50% 0 50% 0);}75%,100%{clip-path:inset(0 0 0 0);}}
@keyframes tdcShutterTopMove{0%,55%{transform:translateY(0);}75%,100%{transform:translateY(-50%);}}
@keyframes tdcShutterBottomMove{0%,55%{transform:translateY(0);}75%,100%{transform:translateY(50%);}}
@keyframes tdcHeroProgressFill{0%{transform:scaleX(0);}56%,100%{transform:scaleX(1);}}

.tdc-shutter-line-wrap{position:absolute;inset:0;z-index:3;}
.tdc-wrap-top{animation:tdcShutterTopMove 10s linear 1 forwards;}
.tdc-wrap-bottom{animation:tdcShutterBottomMove 10s linear 1 forwards;}
.tdc-shutter-line{position:absolute;left:10%;right:10%;top:50%;transform:translateY(-50%);height:2px;
  background:rgba(30,42,61,.15);overflow:hidden;}
.tdc-shutter-line .tdc-fill{position:absolute;inset:0;background:var(--tdc-accent);transform:scaleX(0);
  transform-origin:left center;animation:tdcHeroProgressFill 10s linear 1 forwards;}

.tdc-crosshair-h,.tdc-crosshair-v,.tdc-crosshair-plus,.tdc-coordi{opacity:0;pointer-events:none;
  transition:opacity 150ms ease;z-index:6;position:absolute;}
.tdc-crosshair-h{left:0;right:0;height:1px;background:var(--tdc-accent);}
.tdc-crosshair-v{top:0;bottom:0;width:1px;background:var(--tdc-accent);}
.tdc-crosshair-plus{width:10px;height:10px;transform:translate(-50%,-50%);}
.tdc-crosshair-plus::before,.tdc-crosshair-plus::after{content:'';position:absolute;background:var(--tdc-dark);}
.tdc-crosshair-plus::before{width:100%;height:1.5px;top:50%;left:0;transform:translateY(-50%);}
.tdc-crosshair-plus::after{width:1.5px;height:100%;left:50%;top:0;transform:translateX(-50%);}
.tdc-coordi{top:28px;right:28px;display:flex;gap:12px;font-size:10px;letter-spacing:.06em;color:var(--tdc-accent);
  font-family:inherit;}

/* kicker + oversized headline, top-left over the art */
.tdc-hero-copy{position:absolute;z-index:7;left:0;top:0;padding:clamp(5.5rem,14vh,8rem) var(--tdc-gutter) 0;
  max-width:min(760px,86vw);color:var(--tdc-on-dark);text-shadow:0 2px 24px rgba(20,16,12,.35);
  opacity:0;transform:translateY(14px);animation:tdcHeroTextIn .9s ease 7.6s 1 forwards;}
@keyframes tdcHeroTextIn{to{opacity:1;transform:none;}}
.tdc-hero-kicker{margin:0 0 .6rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,235,225,.85);}
/* !important: Avada's global h1 style + its "Responsive Typography" JS
   (adds .fusion-responsive-typography-calculated + inline styles to every
   h1 on the page) otherwise wins over this on the live site even though
   this selector is more specific — confirmed 2026-09-22. */
.tdc-hero-copy h1{font-family:var(--tdc-disp)!important;font-weight:400!important;
  text-transform:uppercase!important;font-size:clamp(2.6rem,7.2vw,5.4rem)!important;
  line-height:.94!important;letter-spacing:.002em!important;margin:0!important;color:inherit!important;}

/* short supporting line + CTA, bottom-right */
.tdc-hero-foot{position:absolute;z-index:7;right:var(--tdc-gutter);bottom:clamp(1.6rem,6vh,3.5rem);
  max-width:280px;text-align:right;color:rgba(241,235,225,.92);
  opacity:0;animation:tdcHeroTextIn .9s ease 8s 1 forwards;}
.tdc-hero-foot p{font-size:.92rem;line-height:1.5;margin:0 0 1rem;}
.tdc-hero-foot .tdc-btn{display:inline-block;background:var(--tdc-accent);color:var(--tdc-on-dark);font-weight:600;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;padding:.95rem 2rem;
  text-decoration:none;transition:background .2s;}
.tdc-hero-foot .tdc-btn:hover{background:var(--tdc-accent-hover);}

@media (max-width:720px){
  .tdc-ruler-left,.tdc-ruler-mark-y,.tdc-tick-tl{display:none;}
  .tdc-hero{height:auto;min-height:0;}
  .tdc-hero-demo{position:relative;inset:auto;aspect-ratio:4/5;}
  .tdc-hlayer img{object-fit:cover;}
  .tdc-hero-copy{position:static;color:var(--tdc-ink);text-shadow:none;padding:6.5rem var(--tdc-gutter) 1.5rem;}
  .tdc-hero-kicker{color:var(--tdc-muted-strong);}
  .tdc-hero-foot{position:static;color:var(--tdc-muted-strong);text-align:left;max-width:none;
    padding:0 var(--tdc-gutter) 2rem;}
}

/* ============================================================
   2) INTERIOR ASSEMBLY — bare shell -> finished -> furnished
   ============================================================ */
.tdc-build{text-align:center;}
.tdc-build h2,.tdc-build .tdc-lede{margin:0 auto;}
.tdc-stage{position:relative;overflow:hidden;background:#000;margin:1.5rem auto 0;}
.tdc-stage img{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform,opacity;
  user-select:none;pointer-events:none;}
/* not-yet-uploaded layers: hidden (no broken-icon), element still exists
   so the JS timeline doesn't error on a missing layer */
.tdc-missing{display:none!important;}
#tdc-stage-desktop{aspect-ratio:1376/768;width:min(100%,1100px);}
#tdc-stage-mobile{aspect-ratio:768/1376;width:min(100%,400px);display:none;}
@media (max-width:720px){#tdc-stage-desktop{display:none;}#tdc-stage-mobile{display:block;}}

@property --tdc-w{syntax:'<percentage>';inherits:false;initial-value:0%;}
.tdc-stage img[data-i="2"]{--tdc-w:0%;
  -webkit-mask-image:linear-gradient(to right,#000 calc(var(--tdc-w) - 30%),transparent var(--tdc-w));
  mask-image:linear-gradient(to right,#000 calc(var(--tdc-w) - 30%),transparent var(--tdc-w));}
/* stacking differs from appearance order: dining sits BEHIND the right sofa */
#tdc-stage-desktop img[data-i="1"]{z-index:1}#tdc-stage-desktop img[data-i="2"]{z-index:2}
#tdc-stage-desktop img[data-i="3"]{z-index:3}#tdc-stage-desktop img[data-i="4"]{z-index:4}
#tdc-stage-desktop img[data-i="6"]{z-index:5}#tdc-stage-desktop img[data-i="5"]{z-index:6}
#tdc-stage-desktop img[data-i="7"]{z-index:7}#tdc-stage-desktop img[data-i="8"]{z-index:8}
#tdc-stage-mobile img[data-i="1"]{z-index:1}#tdc-stage-mobile img[data-i="2"]{z-index:2}
#tdc-stage-mobile img[data-i="3"]{z-index:3}#tdc-stage-mobile img[data-i="4"]{z-index:4}
#tdc-stage-mobile img[data-i="9"]{z-index:5}#tdc-stage-mobile img[data-i="5"]{z-index:6}
#tdc-stage-mobile img[data-i="6"]{z-index:7}#tdc-stage-mobile img[data-i="7"]{z-index:8}
#tdc-stage-mobile img[data-i="8"]{z-index:9}#tdc-stage-mobile img[data-i="10"]{z-index:10}

/* ============================================================
   3) INK-MASK REVEAL (Studio page)
   ============================================================ */
/* fills its container up to 340px — never wider than the column it's
   placed in, which fixes it overflowing a narrower Fusion Builder column
   (confirmed 2026-09-23: the live Studio column is ~295px, narrower than
   the old fixed 340px). */
.tdc-ink-mask-demo{position:relative;width:100%;max-width:340px;aspect-ratio:4/5;margin:1.5rem auto 0;
  overflow:hidden;background:var(--tdc-bg);}
.tdc-ink-mask-demo .tdc-ink-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  z-index:1;display:block;}
.tdc-ink-mask-demo svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;}

/* ============================================================
   4) CURSOR TRAIL (homepage only, below the hero)
   ============================================================ */
#tdc-trail-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9998;}
#tdc-hover-frame{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:9999;opacity:0;
  transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease,opacity .15s ease;}
#tdc-hover-frame i{position:absolute;width:10px;height:10px;border:0 solid var(--tdc-accent);}
#tdc-hover-frame i:nth-child(1){left:-6px;top:-6px;border-width:1.5px 0 0 1.5px;}
#tdc-hover-frame i:nth-child(2){right:-6px;top:-6px;border-width:1.5px 1.5px 0 0;}
#tdc-hover-frame i:nth-child(3){left:-6px;bottom:-6px;border-width:0 0 1.5px 1.5px;}
#tdc-hover-frame i:nth-child(4){right:-6px;bottom:-6px;border-width:0 1.5px 1.5px 0;}
@media (hover:none),(pointer:coarse){#tdc-trail-canvas,#tdc-hover-frame{display:none;}}

@media (prefers-reduced-motion:reduce){
  #tdc-trail-canvas,#tdc-hover-frame{display:none;}
  .tdc-hlayer--skeleton{animation:none;--tdc-wipe:112;opacity:0;}
  .tdc-hlayer--building{animation:none;clip-path:inset(0 0 0 0);}
  .tdc-shutter-line-wrap{display:none;}
  .tdc-ruler-top,.tdc-ruler-left{animation:none;}
  .tdc-hero-copy,.tdc-hero-foot{animation:none;opacity:1;transform:none;}
}