/*
 * Thalles Sales — Cinematic direction v2
 * Four tightly choreographed scenes, all bound to actual document scroll.
 * No network animation dependency: runs identically in local preview and deployment.
 */
:root { --cinema-ink: #1c1d1b; --cinema-warm: #f6f4ef; --cinema-gold: #91744c; }
.hero-scroll { height: 440svh; min-height: 0; background: var(--cinema-warm); position: relative; }
.hero-stage { height: 100svh; min-height: 0; position: sticky; top: 0; isolation: isolate; overflow: hidden; background: var(--cinema-warm); }
.hero-grid-lines { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5,1fr); opacity: .32; pointer-events: none; }
.hero-grid-lines span { height: 100%; width: 1px; background: #d9d2c8; justify-self: end; }
.hero-grid-lines span:last-child { display: none; }
.hero-topline { position: absolute; z-index: 12; top: clamp(94px, 12.2vh, 135px); left: 6vw; right: 6vw; display:flex; justify-content:space-between; align-items:center; font-size:9px; color: #75736d; font-weight:600; letter-spacing:.2em; }
.hero-topline i { display:inline-block; height:3px; width:3px; margin:0 9px 2px; background:#a88b61; border-radius:50%; }
.hero-opening { position:absolute; z-index:3; inset: 0; padding-top: clamp(172px,24vh,250px); display:flex; flex-direction:column; align-items:center; text-align:center; pointer-events:none; will-change:transform,opacity; }
.hero-sequence-label { display: inline-flex; align-items:center; gap:13px; font-size:10px; font-weight:600; color:#9a784e; letter-spacing:.2em; }
.mini-rule { width:29px; height:1px; background:#a78c67; }
.hero-title { font-family: var(--sans); font-weight:700; font-size:clamp(66px,7.5vw,132px); line-height:.98; letter-spacing:-.092em; margin:26px 0 0; color: #171816; }
.hero-title-line { white-space:nowrap; }
.hero-title em {font-size:1.07em; letter-spacing:-.067em; font-weight:500; }
.hero-subline { font-size:clamp(11px,1vw,14px); line-height:1.65; font-weight:450; color:#5b5a56; margin:28px 16px 22px; }
.hero-subline span { padding:0 5px; color:#99805a; }
.hero-enter-link { display:inline-flex; align-items:center; justify-content:center; gap:27px; min-height:47px; border:1px solid #987d57; background:#987d57; color:white; border-radius:50px; font-size:10px; font-weight:650; letter-spacing:.12em; padding:0 20px 0 24px; pointer-events:auto; transition:background .2s, transform .2s; }
.hero-enter-link:hover { background:#715838; transform:translateY(-2px); }
.hero-enter-link span { font-size:18px; }
.hero-sculpture { position:absolute; z-index:5; top:69%; left:50%; width:min(52vw,690px); opacity:.78; transform:translate3d(-50%,0,0) scale(.68); transform-origin:center top; will-change:transform,opacity; pointer-events:none; }
.hero-sculpture img { width:100%; height:auto; object-fit:contain; filter: contrast(1.02) saturate(.75) drop-shadow(0 34px 32px rgba(76,57,31,.1)); user-select:none; -webkit-user-drag:none; }
.hero-mist { position:absolute; inset:auto 0 0; height:17vh; z-index:6; background:linear-gradient(0deg,var(--cinema-warm) 4%,rgba(246,244,239,.95) 20%,rgba(246,244,239,.25) 70%,transparent); pointer-events:none; }
.hero-editorial { position:absolute; inset:0; z-index:4; opacity:0; pointer-events:none; will-change:opacity,transform; }
.editorial-word { font-family:var(--sans); font-size:clamp(150px,22vw,390px); line-height:1; font-weight:800; letter-spacing:-.115em; position:absolute; left:50%; top:29%; color:#e4ded3; transform:translate(-52%,10%); white-space:nowrap; }
.hero-editorial-details { position:absolute; inset:0; z-index:7; opacity:0; pointer-events:none; will-change:opacity,transform; }
.editorial-left { position:absolute; z-index:2; left:7.5vw; bottom:13vh; text-shadow:0 1px 22px rgba(246,244,239,.7); }
.gold-stroke { display:block; width:50px; height:1px; background:#9b7b50; margin-bottom:23px; }
.editorial-left p { font-family:var(--serif); font-size:clamp(34px,3.6vw,58px); line-height:1.02; letter-spacing:-.04em; margin:0 0 20px; }
.editorial-left small { font-size:12px; line-height:1.9; color:#66645f; }
.editorial-right { display:flex; align-items:center; gap:28px; position:absolute; bottom:11vh; right:7.4vw; font-size:9px; font-weight:650; letter-spacing:.17em; color:#81776b; }
.hero-portrait-scene { position:absolute; inset:0; z-index:7; background:#f0ece4; opacity:0; pointer-events:none; will-change:opacity,transform; }
.hero-portrait-scene::before {content:""; position:absolute; inset:0; opacity:.28; background:linear-gradient(90deg,transparent 49.95%,#d4ccc0 50%,transparent 50.05%); }
.portrait-scene-type { position:absolute; z-index:2; left:8.5vw; top:26%; width:43%; }
.portrait-scene-type h2 { font-family:var(--sans); font-size:clamp(48px,6.2vw,106px); line-height:.98; letter-spacing:-.088em; font-weight:700; margin:29px 0 25px; }
.portrait-scene-type h2 em { font-size:1.08em; color:#8e714d; }
.portrait-scene-type p { max-width:390px; font-size:clamp(12px,1.1vw,15px); color:#66615a; line-height:1.7; }
.scene-number { display:block; margin-top:clamp(25px,6vh,80px); color:#837667; font-size:10px; font-weight:700; letter-spacing:.18em; }
.scene-number span { margin:0 10px; }
.portrait-scene-image { position:absolute; z-index:2; right:9vw; top:16vh; width:36vw; height:76vh; overflow:hidden; background:#d1c6b9; clip-path:inset(16% 14% 16% 14%); will-change:clip-path,transform; }
.portrait-scene-image::after {content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,20,19,.52),transparent 30%); pointer-events:none; }
.portrait-scene-image img { width:100%; height:110%; object-fit:cover; object-position:50% 27%; transform:scale(1.13); will-change:transform; }
.portrait-caption { position:absolute; z-index:2; bottom:25px; left:26px; color:white; font-size:10px; font-weight:700; letter-spacing:.15em; }
.portrait-huge-word { position:absolute; z-index:1; bottom:-.16em; left:-.06em; white-space:nowrap; font-weight:800; font-size:17.6vw; line-height:.9; letter-spacing:-.09em; color:#e0d9cd; pointer-events:none; }
.hero-axis { position:absolute; z-index:8; display:flex; align-items:center; gap:12px; bottom:15%; font-size:8px; font-weight:700; letter-spacing:.21em; color:#83766a; writing-mode:vertical-rl; pointer-events:none; }
.hero-axis span:not(:first-child):not(:last-child),.hero-axis span:empty { width:1px; height:50px; background:#9d855f; }
.hero-axis-left {left:6vw; transform:rotate(180deg); }
.hero-axis-right {right:6vw; }
.hero-axis-right>span:nth-child(2) { height:50px; background:#9d855f; width:1px; }
.hero-scroll-direction { position:absolute; z-index:9; bottom:26px; left:50%; transform:translateX(-50%); text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; color:#8c7658; pointer-events:none; will-change:opacity; }
.hero-scroll-direction span {white-space:nowrap; font-size:9px; font-weight:700; letter-spacing:.18em; }
.hero-scroll-direction b { font-weight:300; font-size:25px; line-height:1; animation: cinema-scroll-tick 1.7s ease-in-out infinite alternate; }
@keyframes cinema-scroll-tick {from{ transform:translateY(0); }to{transform:translateY(8px);} }
.hero-scenes-progress { position:absolute; bottom:0; left:0; right:0; height:2px; z-index:10; background:rgba(120,103,77,.12); }
.hero-scenes-progress span { display:block; background:#a58a62; width:100%; height:100%; transform-origin:left; transform:scaleX(0); }
/* Refine the section hand-off: generous editorial pacing, figure in motion. */
.intro-intent {padding-top:9vw;}
.intro-photo { border-radius:0; }
.intro-photo img { will-change:transform; }
.signature-main-photo img { will-change:transform; }
.signature-section { border-top:1px solid rgba(0,0,0,.04); }
.education-row {transition:padding-left .35s ease, background .35s ease;}
.education-row:hover {padding-left:1vw;background:rgba(146,118,78,.045);}
.specialty-card {transition:none;}
.article-card {transition:transform .45s var(--ease),border-color .4s ease,background .45s ease;}
.article-card:hover {transform:translateY(-6px);}
.gallery-tile img{ transition:transform 1.4s var(--ease); }
.gallery-tile:hover img{transform:scale(1.055);}
@media (max-width:1100px) {
  .hero-title {font-size:8.2vw;}
  .hero-sculpture{width:65vw;}
  .portrait-scene-type {left:7%; width:48%;}
  .portrait-scene-image{right:7%;width:39vw;}
}
@media(max-width:760px){
  .hero-scroll{height:390svh;}
  .hero-stage{height:100svh;min-height:0;}
  .hero-grid-lines{grid-template-columns:repeat(3,1fr);}
  .hero-grid-lines span{display:block!important;}
  .hero-grid-lines span:nth-child(3),.hero-grid-lines span:nth-child(4){display:none!important;}
  .hero-topline{top:88px;left:6%;right:6%;font-size:7px;letter-spacing:.13em;}
  .hero-topline span:last-child{display:none;}
  .hero-opening{padding-top:clamp(170px,24svh,220px);}
  .hero-sequence-label{font-size:8px;letter-spacing:.13em;gap:8px;}
  .mini-rule{width:18px;}
  .hero-title{font-size:clamp(43px,10.7vw,73px);letter-spacing:-.09em;line-height:1.02;margin-top:20px;}
  .hero-title-line{white-space:nowrap;}
  .hero-title em{font-size:1.05em;}
  .hero-subline{max-width:82%;font-size:11px;margin:20px 0 20px;}
  .hero-enter-link{min-height:40px;font-size:9px;gap:12px;padding:0 16px;}
  .hero-sculpture{width:min(116vw,590px);top:72%;}
  .hero-mist{height:22vh;}
  .editorial-word{font-size:28vw;top:38%;}
  .hero-editorial-details::before {content:""; position:absolute; inset:auto 0 0; height:51%; background:linear-gradient(0deg,rgba(246,244,239,.98) 8%,rgba(246,244,239,.92) 45%,rgba(246,244,239,0));}
  .editorial-left{left:8%;bottom:16%;}
  .editorial-left p{font-size:clamp(35px,9vw,62px);}
  .editorial-left small{font-size:11px;}
  .editorial-right{bottom:9vh;right:9%;font-size:8px;}
  .hero-axis{bottom:12%;font-size:6px;}
  .hero-axis-left{left:4%;}.hero-axis-right{right:4%;}
  .hero-scroll-direction{bottom:17px;}
  .hero-scroll-direction span{font-size:8px;}
  .portrait-scene-type{top:14vh;left:7vw;width:86%;}
  .portrait-scene-type h2{font-size:clamp(39px,10.4vw,69px);line-height:.94;margin:17px 0 15px;}
  .portrait-scene-type p{font-size:11px;max-width:280px;}
  .scene-number{margin-top:12px;font-size:8px;}
  /* Mobile final scene: reserve a dedicated strip below the photo for the complete word. */
  .portrait-scene-image{right:7%;top:49%;width:74%;height:37%;}
  .portrait-caption{bottom:13px;left:14px;font-size:8px;}
  .portrait-huge-word{
    left:0;right:0;bottom:3.5svh;width:100%;
    font-size:clamp(34px,11vw,66px);line-height:1;
    font-weight:800;letter-spacing:-.075em;
    text-align:center;white-space:nowrap;
    color:#d0c5b4;z-index:3;
  }
  .intro-intent{padding-top:75px;}
}
@media(max-width:390px){
 .hero-opening{padding-top:24svh;}
 .hero-title{font-size:10.45vw;}
 .hero-subline{font-size:10px;}
 .hero-sequence-label{font-size:7px;}
 .portrait-scene-type h2{font-size:10vw;}
}
@media(prefers-reduced-motion:reduce){
 .hero-scroll{height:100svh; min-height:550px;}
 .hero-stage{height:100svh;min-height:550px;}
 .hero-opening{opacity:1!important;transform:none!important;}
 .hero-sculpture{opacity:.7!important;transform:translate3d(-50%,0,0) scale(.68)!important;}
 .hero-editorial,.hero-portrait-scene{display:none!important;}
 .hero-scroll-direction b{animation:none;}
 .intro-photo img,.signature-main-photo img{transform:none!important;}
}
@media(max-width:390px){
  .gallery-heading>span:last-child{display:none}
}

/* v34: preserve mobile scenes without expensive photo clip-path repaints. */
@media(max-width:760px){
 .hero-sculpture img{filter:none}
 .portrait-scene-image{clip-path:inset(0 0 0 0)!important;will-change:transform}
 .intro-photo img,.signature-main-photo img{will-change:auto;transform:none!important}
 .hero-opening,.hero-sculpture,.hero-editorial,.hero-editorial-details,.hero-portrait-scene{backface-visibility:hidden}
}