/* Optical surfaces. No noise on glass; all geometry and live type stay intact. */
:root{
  --glass-body:radial-gradient(ellipse at 0% 0%,#ffffff12,transparent 58%),
    radial-gradient(ellipse at 100% 100%,#ffffff0a,transparent 45%),
    linear-gradient(145deg,#29292965,#2525258c 58%,#24242470);
  /* Fixed-size reflections do not stretch into long stripes on wide panels. */
  --glass-rim:radial-gradient(ellipse 92px 70px at 0% 0%,#ffffff85,transparent 85%),
    radial-gradient(ellipse 66px 48px at 100% 100%,#ffffff38,transparent 85%),
    linear-gradient(125deg,#ffffff14,#ffffff08 55%,#ffffff0d);
}

/* Clear optical plates: restrained surface haze and a sharply lit bevel. */
.hero-visual :is(.frame-back,.frame-front),#process .process-card{
  background:var(--glass-body);
  border-color:transparent;
  box-shadow:inset 0 1px 1px #ffffff10,inset -1px -1px 2px #ffffff06,
    5px 20px 32px #0009;
  backdrop-filter:blur(4px) saturate(.2);-webkit-backdrop-filter:blur(4px) saturate(.2);
}
.hero-visual .frame-back{
  background:radial-gradient(ellipse at 0% 0%,#ffffff12,transparent 65%),
    linear-gradient(145deg,#2e2e2e91,#242424a3);
}
.hero-visual .frame-front{color:#ededed}
.hero-visual .frame-front .frame-word{color:#ededed;text-shadow:none}
.hero-visual .frame-front .frame-word>span{color:#c5c5c5}
.hero-visual .frame-front :is(.frame-label,.frame-footer){color:#c4c4c4}
/* Keep the original travelling sheen, now subdued and broad. */
.hero-visual .frame-front:before{
  background:linear-gradient(110deg,transparent 36%,#ffffff01 42%,#ffffff0b 49%,#ffffff03 55%,transparent 63%);
}
.hero-visual .frame-back:before{background:none}
.hero-visual .frame:after,#process .process-card:after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;padding:1.25px;background:var(--glass-rim);
  opacity:1;mix-blend-mode:normal;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
/* No repeated graphite noise or stripes on optical plates. */
#process .process-card:before{
  background:radial-gradient(ellipse at 5% 0%,#ffffff09,transparent 55%);
  z-index:-1;
}
#process :is(.process-note-back,.process-take-back){
  background:linear-gradient(145deg,#2525258c,#202020b0);
}
#process .process-script{
  background:radial-gradient(ellipse at 100% 0%,#ffffff0a,transparent 65%),
    linear-gradient(145deg,#1f1f1f85,#1e1e1ead);
}
#process .process-take{background:var(--glass-body)}
#process .process-result{
  color:#ededed;
  background:radial-gradient(ellipse at 0% 0%,#ffffff16,transparent 65%),
    linear-gradient(145deg,#34343470,#28282894);
}
#process .process-result :is(.process-stamp,.process-result-footer){color:#c4c4c4}
/* Fine satin texture belongs to the solid sphere, never the glass above it. */
#process .process-disc:after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:url('assets/graphite-grain.svg') repeat;opacity:.3;mix-blend-mode:soft-light;
}

/* Clearer, thicker glass on small overlays. The bright lip is local, not a halo. */
.hero-visual :is(.floating-note,.timeline-widget),
#process :is(.process-chip,.process-audio,.process-timeline){
  background:radial-gradient(ellipse 76px 30px at 12px 0%,#ffffff16,transparent 85%),
    radial-gradient(ellipse 86px 28px at 100% 110%,#ffffff09,transparent 85%),
    linear-gradient(155deg,#33333350,#262626a8 56%,#24242480);
  border-color:transparent;
  box-shadow:inset 0 1px 1px #ffffff12,inset 1px 0 2px #ffffff08,
    inset 0 -1px 2px #ffffff08,inset -1px 0 2px #0006,2px 10px 18px #0009;
  backdrop-filter:blur(5px) saturate(.15);-webkit-backdrop-filter:blur(5px) saturate(.15);
}
.hero-visual .floating-note{
  background:radial-gradient(ellipse 74px 34px at 8% 0%,#ffffff22,transparent 85%),
    radial-gradient(ellipse 70px 25px at 100% 115%,#ffffff0c,transparent 85%),
    linear-gradient(160deg,#32323270,#242424ad 55%,#25252570);
}
.hero-visual .floating-note:after{
  background:linear-gradient(172deg,#ffffff06,transparent 25%,transparent 80%,#ffffff07);
  mix-blend-mode:normal;opacity:1;
}
.hero-visual :is(.floating-note,.timeline-widget):before,
#process :is(.process-chip,.process-audio,.process-timeline):before{
  content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;
  z-index:4;pointer-events:none;opacity:1;mix-blend-mode:normal;
  background:var(--glass-rim);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}

/* Remove the old full-width top gleam under the new local rim. */
.hero-visual .timeline-widget:after{display:none}

/* Large information panels: quieter reflection, complete edges, clear copy. */
.volume-option,.service-inclusions article{
  background:radial-gradient(ellipse at 0% 0%,#ffffff0b,transparent 60%),
    linear-gradient(125deg,#3e3e3e68,#2d2d2d50 60%,#30303060);
  border-color:transparent;border-radius:8px;
  box-shadow:inset 0 1px 1px #ffffff0c,inset 0 -1px 1px #ffffff06,2px 8px 18px #0005;
  backdrop-filter:blur(3px) saturate(.2);-webkit-backdrop-filter:blur(3px) saturate(.2);
}
.volume-option:after,.service-inclusions article:after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  padding:1px;border-radius:inherit;background:var(--glass-rim);opacity:.65;
  mix-blend-mode:normal;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}

/* Give the existing copy room within the painted surface, without changing
   its box or moving any text. The decoration occupies part of the existing gap. */
.service-inclusions article{
  background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.service-inclusions article:before{
  content:'';position:absolute;inset:0 -10px -12px -8px;z-index:-2;
  pointer-events:none;border-radius:10px;
  background:radial-gradient(ellipse at 0% 0%,#ffffff10,transparent 58%),
    radial-gradient(ellipse at 100% 120%,#ffffff08,transparent 60%),
    linear-gradient(140deg,#38383860,#2b2b2b65 60%,#29292950);
  box-shadow:inset 0 1px 1px #ffffff0c,inset 0 -1px 2px #ffffff06,2px 8px 16px #0005;
  backdrop-filter:blur(3px) saturate(.2);-webkit-backdrop-filter:blur(3px) saturate(.2);
}
.service-inclusions article:after{inset:0 -10px -12px -8px;border-radius:10px;opacity:.9}
.terrain-mobile .hero-visual .floating-note{
  backdrop-filter:blur(5px) saturate(.15);-webkit-backdrop-filter:blur(5px) saturate(.15);
}

/* No decorative frames, glass footers, zoom or hover lighting in the portfolio. */
#work .case-preview,#work .work-card:hover .case-preview{
  border-color:transparent;box-shadow:none;transform:none;transition:none;
}
#work .case-preview:before,#work .case-preview:after,#work .case-card-action:before{display:none}
#work .case-card-action,#work .case-card-meta{text-shadow:none}
#work .case-card-action{border-color:transparent}
#work .case-poster,#work .work-card:hover .case-poster,
#work .work-card.is-in-view .case-poster{transform:none;filter:grayscale(1);transition:none}
#work .case-play,#work .work-card:hover .case-play,#work .work-card.is-in-view .case-play{
  background:#1119;color:#fff;border-color:#ffffff65;box-shadow:none;transition:none;
}

/* Retain a clean, non-textured viewer. */
.case-copy:before{display:none}

@supports not (backdrop-filter:blur(1px)){
  .hero-visual :is(.frame,.floating-note,.timeline-widget),
  #process :is(.process-card,.process-chip,.process-audio,.process-timeline),
  .volume-option,.service-inclusions article{background-color:#151515d9}
}
@media(forced-colors:active){
  .hero-visual :is(.frame,.floating-note,.timeline-widget),
  #process :is(.process-card,.process-chip,.process-audio,.process-timeline),
  .volume-option,.service-inclusions article{
    background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .hero-visual .frame:after,.hero-visual :is(.floating-note,.timeline-widget):before,
  #process .process-card:after,#process :is(.process-chip,.process-audio,.process-timeline):before,
  .volume-option:after,.service-inclusions article:before,.service-inclusions article:after{display:none}
}