/* First-visit opening: brand mesh with grain, the supplied lettering bleeding in through one soft
   left-to-right mask, then an atmospheric dissolution of the mesh from the centre. Decorative only. The head bootstrap decides
   play/skip before paint (html[data-opening]); without it the overlay stays hidden (inline display:none).
   Timeline (from data-opening="playing"): lettering bleeds in left to right through one broad soft mask
   0–1100ms, fades out 1200–1850ms; the mesh dissolves from the centre 1050–4150ms (very wide feather plus
   a full-field fade from 2305ms so the corners melt instead of being wiped). Failsafe hides all at 5500ms. */
@property --opening-r{syntax:'<length>';inherits:false;initial-value:0px}
@property --opening-x{syntax:'<percentage>';inherits:false;initial-value:0%}
.opening{display:none}
html[data-opening="play"] .opening,html[data-opening="playing"] .opening{
 display:block!important;position:fixed;inset:0;z-index:1000;overflow:hidden;background:transparent;
 animation:opening-failsafe 0s linear 5500ms both}
/* Mesh: primary carries the field; program peach and rose, plus a restrained ochre-gold, sit at the edges so the centre stays deep for the white lettering. */
.opening__mesh{position:absolute;inset:-8%;
 --opening-r-end:calc(max(100vw,100vh) * 2.4);--opening-r-end:calc(hypot(50vw,50vh) / .3);
 /* Atmospheric dissolution: every stop scales with the radius, so the field is fully opaque while --opening-r is 0
    and the feather (30%→110% of r) is always wider than the clear core: a glow that widens, never a ring. */
 -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--opening-r) * .3),rgba(0,0,0,.42) calc(var(--opening-r) * .55),rgba(0,0,0,.8) calc(var(--opening-r) * .8),#000 calc(var(--opening-r) * 1.1));
 mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--opening-r) * .3),rgba(0,0,0,.42) calc(var(--opening-r) * .55),rgba(0,0,0,.8) calc(var(--opening-r) * .8),#000 calc(var(--opening-r) * 1.1));
 background:
  radial-gradient(ellipse 58% 52% at 16% 20%,rgba(239,222,206,.92) 0%,rgba(239,222,206,0) 68%),
  radial-gradient(ellipse 48% 44% at 82% 16%,rgba(216,166,104,.7) 0%,rgba(216,166,104,0) 66%),
  radial-gradient(ellipse 56% 58% at 84% 82%,rgba(231,203,197,.9) 0%,rgba(231,203,197,0) 66%),
  radial-gradient(ellipse 46% 50% at 20% 84%,rgba(201,112,90,.9) 0%,rgba(201,112,90,0) 70%),
  radial-gradient(ellipse 70% 60% at 50% 50%,rgba(150,74,58,.55) 0%,rgba(150,74,58,0) 72%),
  linear-gradient(160deg,#b5634f 0%,#AD5C4A 46%,#9d4f41 100%);
 transform:scale(1)}
html[data-opening="play"] .opening__mesh{animation:opening-mesh 4200ms cubic-bezier(.22,1,.36,1) both}
html[data-opening="playing"] .opening__mesh{animation:opening-mesh 4200ms cubic-bezier(.22,1,.36,1) both,opening-reveal 3100ms cubic-bezier(.45,.05,.3,1) 1050ms both,opening-field 1845ms cubic-bezier(.4,0,.2,1) 2305ms both}
.opening__mesh::after{content:"";position:absolute;inset:0;background:var(--grain) 0 0/85px;filter:grayscale(1) contrast(4);mix-blend-mode:overlay;opacity:.62}
/* Lettering: the original PNG (five static column cuts). One continuous soft mask travels left to right;
   the feather is 50% of the logo width, so neighbouring letters share intermediate opacity. Nothing moves. */
.opening__logo{position:absolute;inset:0;margin:auto;width:clamp(187px,15.3vw,238px);aspect-ratio:2422/875;height:auto;
 -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--opening-x) - 50%),transparent var(--opening-x));
 mask-image:linear-gradient(90deg,#000 calc(var(--opening-x) - 50%),transparent var(--opening-x))}
.opening__logo img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:1}
html[data-opening="playing"] .opening__logo{animation:opening-bleed 1100ms cubic-bezier(.35,.1,.3,1) both,opening-logo-out 650ms cubic-bezier(.4,0,.6,1) 1200ms both}
@media(max-width:767px){.opening__logo{width:clamp(153px,42.5vw,178.5px)}}
/* Interaction or a missing @property implementation: plain opacity instead of the mask. */
.opening.is-cut{opacity:0;transition:opacity 200ms ease}
.opening.is-plain .opening__mesh{-webkit-mask-image:none!important;mask-image:none!important;animation:opening-mesh 4200ms cubic-bezier(.22,1,.36,1) both!important}
/* Entrance and exit live on different elements (imgs fade in, the container fades out): two opacity animations on
   one element would let the exit's backwards fill (opacity 1) override the entrance and the lettering would pop. */
.opening.is-plain .opening__logo{-webkit-mask-image:none!important;mask-image:none!important;animation:opening-logo-out 650ms cubic-bezier(.4,0,.6,1) 1200ms both!important}
.opening.is-plain .opening__logo img{animation:opening-glyph 1100ms ease both}
html[data-opening="playing"] .opening.is-plain{animation:opening-failsafe 0s linear 5500ms both,opening-plain 3100ms cubic-bezier(.45,.05,.3,1) 1050ms both}
@keyframes opening-glyph{from{opacity:0}to{opacity:1}}
@keyframes opening-logo-out{from{opacity:1}to{opacity:0}}
@keyframes opening-mesh{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes opening-reveal{from{--opening-r:0px}to{--opening-r:var(--opening-r-end)}}
@keyframes opening-field{from{opacity:1}to{opacity:0}}
@keyframes opening-bleed{from{--opening-x:0%;filter:blur(2px)}to{--opening-x:160%;filter:blur(0)}}
@keyframes opening-plain{from{opacity:1}to{opacity:0}}
@keyframes opening-failsafe{to{visibility:hidden;opacity:0;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.opening{display:none!important}}