/* Premium Developers — Cinematic Precision Layer
   Progressive enhancement over the existing architectural motion system. */
:root{
  --cinema-ease:cubic-bezier(.16,1,.3,1);
  --cinema-gold:#d7b889;
  --cinema-deep:#061811;
}

/* Modern same-origin page transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.46s var(--cinema-ease) both cinemaPageOut}
::view-transition-new(root){animation:.62s var(--cinema-ease) both cinemaPageIn}
@keyframes cinemaPageOut{to{opacity:0;transform:scale(.988);filter:blur(2px)}}
@keyframes cinemaPageIn{from{opacity:0;transform:scale(1.012);filter:blur(3px)}}

/* Kinetic typography: each word rises through its own mask */
.kinetic-title{overflow:visible}
.kinetic-word{display:inline-block;overflow:hidden;vertical-align:bottom;margin-inline-end:.12em;margin-block:-.08em;padding-block:.08em}
.kinetic-word-inner{
  display:inline-block;opacity:0;
  transform:translate3d(0,118%,0) rotate(2.5deg);
  transition:
    transform .92s var(--cinema-ease) calc(var(--wi,0) * 54ms + 90ms),
    opacity .42s ease calc(var(--wi,0) * 54ms + 90ms);
  will-change:transform;
}
[dir="rtl"] .kinetic-word-inner{transform:translate3d(0,118%,0) rotate(-2.2deg)}
.cinematic-entered .kinetic-word-inner{opacity:1;transform:translate3d(0,0,0) rotate(0)}
.kinetic-title em .kinetic-word-inner{font-style:italic}

/* Hero aperture frame */
.cinematic-aperture{position:absolute;z-index:3;inset:18px;pointer-events:none;border:1px solid rgba(231,214,190,.15);opacity:0;transform:scale(.985);transition:1s .42s var(--cinema-ease)}
.cinematic-aperture:before,.cinematic-aperture:after{content:"";position:absolute;width:66px;height:66px;border-color:rgba(221,194,156,.62)}
.cinematic-aperture:before{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}
.cinematic-aperture:after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}
.cinematic-entered .cinematic-aperture{opacity:1;transform:scale(1)}
.cinematic-aperture .coord{
  position:absolute;right:16px;top:15px;font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.65);writing-mode:vertical-rl
}
[dir="rtl"] .cinematic-aperture .coord{right:auto;left:16px;writing-mode:vertical-lr}

/* Magnetic CTA */
.cinematic-magnetic{
  --mag-x:0px;--mag-y:0px;
  transform:translate3d(var(--mag-x),var(--mag-y),0);
  transition:transform .22s ease,background-color .25s,border-color .25s,color .25s,box-shadow .25s;
  will-change:transform;
}
.cinematic-magnetic:hover{box-shadow:0 15px 38px rgba(6,24,17,.12)}
.btn.gold.cinematic-magnetic:hover{box-shadow:0 18px 42px rgba(198,155,98,.18)}

/* Architectural section chapters */
.cinematic-section{position:relative;isolation:isolate}
.cinematic-section>.wrap,.cinematic-section>.narrow{position:relative;z-index:2}
.cinematic-section:before{
  content:"";position:absolute;z-index:1;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent 3%,rgba(198,155,98,.55) 23%,rgba(198,155,98,.12) 72%,transparent 97%);
  transform:scaleX(.12);transform-origin:left;opacity:0;
  transition:transform 1.1s var(--cinema-ease),opacity .8s;
}
[dir="rtl"] .cinematic-section:before{transform-origin:right}
.cinematic-section.cinematic-in:before{transform:scaleX(1);opacity:.6}
.cinematic-section-no{
  position:absolute;z-index:0;right:4vw;top:18px;
  font-family:var(--serif);font-size:clamp(5rem,11vw,10rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(29,89,69,.085);
  letter-spacing:-.06em;pointer-events:none;user-select:none;
  transform:translateY(20px);opacity:0;transition:1s var(--cinema-ease)
}
.section.dark .cinematic-section-no,.flagship .cinematic-section-no{
  -webkit-text-stroke-color:rgba(221,194,156,.1)
}
[dir="rtl"] .cinematic-section-no{right:auto;left:4vw}
.cinematic-section.cinematic-in .cinematic-section-no{opacity:1;transform:none}

/* Portfolio hover preview: editorial floating image */
.portfolio-preview{
  position:fixed;z-index:90;left:0;top:0;width:260px;aspect-ratio:4/5;
  pointer-events:none;opacity:0;transform:translate3d(var(--preview-x,0),var(--preview-y,0),0) rotate(-2deg) scale(.92);
  transition:opacity .22s ease,transform .26s var(--cinema-ease);
  border:1px solid rgba(255,255,255,.22);border-radius:16px;overflow:hidden;
  box-shadow:0 28px 80px rgba(4,18,12,.24);background:#17392c;
}
.portfolio-preview.show{opacity:1;transform:translate3d(var(--preview-x,0),var(--preview-y,0),0) rotate(-1deg) scale(1)}
.portfolio-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .2s ease}
.portfolio-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,18,12,.74))}
.portfolio-preview .meta{position:absolute;z-index:2;left:15px;right:15px;bottom:14px;color:#fff}
.portfolio-preview .meta small{display:block;color:#dbc29f;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase}
.portfolio-preview .meta strong{display:block;font-family:var(--serif);font-size:1.45rem;margin-top:3px}
.portfolio-stack.cinematic-portfolio .portfolio-item{position:relative}
.portfolio-stack.cinematic-portfolio .portfolio-item h3{transition:transform .38s var(--cinema-ease),color .3s}
.portfolio-stack.cinematic-portfolio .portfolio-item:hover h3{transform:translateX(9px);color:var(--pine-3)}
[dir="rtl"] .portfolio-stack.cinematic-portfolio .portfolio-item:hover h3{transform:translateX(-9px)}

/* Cinematic project cards: edge tracing + image focus */
.project-feature.cinematic-project,.project-mini.cinematic-project{isolation:isolate}
.project-feature.cinematic-project:before,.project-mini.cinematic-project:before{
  content:"";position:absolute;z-index:3;inset:11px;border:1px solid rgba(221,194,156,.0);
  transition:border-color .42s ease,transform .5s var(--cinema-ease);transform:scale(.985);pointer-events:none
}
.project-feature.cinematic-project:hover:before,.project-mini.cinematic-project:hover:before{border-color:rgba(221,194,156,.5);transform:scale(1)}
.project-feature.cinematic-project .content,.project-mini.cinematic-project .content{transition:transform .55s var(--cinema-ease)}
.project-feature.cinematic-project:hover .content,.project-mini.cinematic-project:hover .content{transform:translateY(-8px)}
.project-feature.cinematic-project img,.project-mini.cinematic-project img{transform:scale(1.025);filter:saturate(.92);transition:transform 1.05s var(--cinema-ease),filter .7s}
.project-feature.cinematic-project:hover img,.project-mini.cinematic-project:hover img{transform:scale(1.065);filter:saturate(1.03)}

/* Gallery precision lens */
.masonry figure.cinematic-photo{isolation:isolate;border-radius:3px}
.masonry figure.cinematic-photo:before{
  content:"";position:absolute;z-index:3;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle 150px at var(--spot-x,50%) var(--spot-y,50%),rgba(236,219,193,.18),transparent 72%);
  mix-blend-mode:screen;transition:opacity .25s
}
.masonry figure.cinematic-photo:hover:before{opacity:1}
.masonry figure.cinematic-photo:after{
  content:"";position:absolute;z-index:3;inset:8px;border:1px solid rgba(255,255,255,.0);pointer-events:none;transition:border-color .35s
}
.masonry figure.cinematic-photo:hover:after{border-color:rgba(255,255,255,.34)}
.masonry figure.cinematic-photo img{transform:scale(1.01);transition:transform .75s var(--cinema-ease),filter .55s}
.masonry figure.cinematic-photo:hover img{transform:scale(1.045);filter:saturate(1.04)}
.masonry figure.cinematic-photo figcaption{position:relative;z-index:4;background:var(--paper);transition:padding-left .35s var(--cinema-ease),color .3s}
.masonry figure.cinematic-photo:hover figcaption{padding-left:18px;color:var(--pine)}
[dir="rtl"] .masonry figure.cinematic-photo:hover figcaption{padding-left:11px;padding-right:18px}

/* Film tiles receive a subtle moving scan line */
.video-tile.cinematic-film:before,.film-feature.cinematic-film:before{
  content:"";position:absolute;z-index:3;left:0;right:0;top:-12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(221,194,156,.78),transparent);
  opacity:0;transition:opacity .3s;pointer-events:none
}
.video-tile.cinematic-film:hover:before,.film-feature.cinematic-film:hover:before{
  opacity:.72;animation:cinematicScan 1.55s var(--cinema-ease) forwards
}
@keyframes cinematicScan{to{transform:translateY(520px)}}

/* Filter pills and project subnav gain micro-motion */
.gallery-toolbar .filter-btn,.project-subnav a{position:relative;overflow:hidden}
.gallery-toolbar .filter-btn:after,.project-subnav a:after{
  content:"";position:absolute;left:50%;right:50%;bottom:3px;height:1px;background:var(--sand);
  transition:left .28s var(--cinema-ease),right .28s var(--cinema-ease)
}
.gallery-toolbar .filter-btn:hover:after,.gallery-toolbar .filter-btn.active:after,.project-subnav a:hover:after{left:12%;right:12%}

/* Scroll-velocity accent on global progress line */
.scroll-progress{box-shadow:0 0 var(--progress-glow,0px) rgba(198,155,98,.35);transition:box-shadow .18s}

/* Fine-grain luxury texture without image payload */
.cinematic-grain{
  position:fixed;z-index:120;inset:0;pointer-events:none;opacity:.018;mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 20% 30%,#000 0 .55px,transparent .7px),
    radial-gradient(circle at 73% 61%,#000 0 .48px,transparent .62px);
  background-size:7px 7px,11px 11px
}

/* Touch / performance discipline */
@media(max-width:900px){
  .portfolio-preview{display:none}
  .cinematic-section-no{font-size:5rem;right:18px;top:20px}
  [dir="rtl"] .cinematic-section-no{right:auto;left:18px}
  .project-feature.cinematic-project:hover img,.project-mini.cinematic-project:hover img{transform:scale(1.025)}
  .cinematic-aperture{inset:10px}
}
@media(pointer:coarse){
  .cinematic-magnetic{transform:none!important}
  .masonry figure.cinematic-photo:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .kinetic-word-inner{opacity:1!important;transform:none!important;transition:none!important}
  .cinematic-aperture,.cinematic-section:before,.cinematic-section-no{transition:none!important;opacity:.45;transform:none!important}
  .cinematic-magnetic{transform:none!important;transition:none!important}
  .portfolio-preview{display:none!important}
  .project-feature.cinematic-project img,.project-mini.cinematic-project img,
  .masonry figure.cinematic-photo img{transform:none!important;transition:none!important}
  .video-tile.cinematic-film:before,.film-feature.cinematic-film:before{display:none!important}
}