/* Continuous blue atmosphere; original geometry and foreground motion remain in index.html. */
.atmosphere-stage{
  position:absolute;left:0;right:0;z-index:0;overflow:hidden;isolation:isolate;
  pointer-events:none;visibility:hidden;
  /* The stage fades in over its first 340px. That used to be a mask on this page-tall element, which made the
     browser hold a page-tall layer for it; the same ramp is now in the backgrounds, and the first scene's mask. */
  background:linear-gradient(180deg,transparent var(--ground-height,0px),#000 var(--ground-height,0px))
}
/* A very faint static dither over the lights. Dark gradients only have a few steps between black and blue, and on a
   screen those steps show as wavy bands; two percent of noise lets them blend. It is not visible as grain. */
.atmosphere-stage::before,.atmosphere-stage::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
/* Only the short entry strip needs an alpha fade. A page-tall mask made Chrome retain a huge surface. */
.atmosphere-stage::before{top:0;height:360px;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
.atmosphere-stage::after{top:360px;bottom:0;background-position:0 -360px}
.atmosphere-ground{position:absolute;left:0;right:0;top:0;height:var(--ground-height,0px);background:linear-gradient(180deg,rgba(2,4,9,0),#020409 340px,#030610 var(--work-tone),#03060e var(--skills-tone),#03050d var(--honors-tone),#101b2c var(--landscape-tone),#000 100%)}
.atmosphere-ready .atmosphere-stage{visibility:visible}
/* Light that is nowhere near the screen is not drawn at all; atmosphere.js wakes it 420px early. */
.atmosphere-scene:not(.is-visible),.colour-field:not(.is-lit){visibility:hidden}
.atmosphere-ready :is(#projects,#skills,#awards,#life,#open,#contact){background:transparent;z-index:1}
.atmosphere-scene{position:absolute;left:0;right:0;--scene-fade:260px}
/* Painted scenes multiply their fade into the canvas. Only the bounded landscape photograph needs a CSS mask. */
.scene-parallax>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-parallax{position:absolute;inset:-65px 0}
.scene-art,.scene-light,.scene-detail{position:absolute;inset:0;pointer-events:none}
.scene-art,.scene-light{--scene-turn:0deg;animation:optical-drift 24s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:50% 50%}
.scene-light{animation-name:optical-breathe;animation-duration:31s;animation-delay:-13s}
/* Diffuse R03 colour depth: a calm dark centre and low blue-violet light, without an object. */
.scene--projects{background:none}
/* Colour fields: each box below is painted by atmosphere.js into one small canvas (about a third of the box's
   resolution). The light is smooth, so it scales up without visible loss, and the GPU keeps a few hundred KB per
   field instead of several full-screen layers and masks. Gradients, drift timing and masks live in FIELDS there. */
.colour-field{position:absolute;left:-12%;right:-12%;pointer-events:none;opacity:.85}
.colour-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Fields are placed by fractions of their section's height (--scene-h, set in atmosphere.js), so every light sits at the
   same place in the story on a phone and on a wide screen. */
.colour-field--work{top:var(--scene-fade);height:calc(var(--scene-h,3000px) * .56)}
.colour-field--work-mid{top:calc(var(--scene-fade) + var(--scene-h,3000px) * .3);height:calc(var(--scene-h,3000px) * .46)}
.colour-field--work-lower{top:calc(var(--scene-fade) + var(--scene-h,3000px) * .58);height:calc(var(--scene-h,3000px) * .52)}
/* The Selected Works entry ramp is painted into each field, keeping the multi-screen section unmasked. */
.scene--projects .scene-detail{background:linear-gradient(180deg,transparent 86%,rgba(2,5,12,.15))}
.scene--skills{background:none}
.scene--skills .scene-art{
  inset:17% -16% auto -5%;height:1050px;--scene-turn:-12deg;
  background:none;opacity:0;animation:none;
  -webkit-mask-image:linear-gradient(transparent,#000 18%,#000 73%,transparent);
  mask-image:linear-gradient(transparent,#000 18%,#000 73%,transparent)
}
.scene--skills .scene-light,.scene--skills .scene-detail{background:none;animation:none}
/* Recognition: cobalt and indigo light entering from the page edges, a cool highlight at the source, a dark reading zone. */
.scene--awards{background:none}
.colour-field--honors{top:calc(var(--scene-fade) - 240px);height:calc(var(--scene-h,3000px) * .5 + 240px)}
.colour-field--honors-lower{top:calc(var(--scene-fade) + var(--scene-h,3000px) * .42);height:calc(var(--scene-h,3000px) * .56)}
.scene--awards .scene-detail{background:none}
/* A bounded landscape shows the full summit instead of stretching it over the whole section. */
.scene--life{background:none}
.scene--life .scene-parallax{inset:0;transform:none;transition:none}
.scene-landscape{position:absolute;top:calc(var(--scene-fade) - 100px);left:0;right:0;height:clamp(720px,63vw,920px);
  /* the photo strip is the end of the picture: it fades out over a length measured from the strip, so no line ever shows behind a photo */
  --fe:max(360px,calc(var(--gallery-top) - var(--scene-fade) + 40px));
  --fl:max(140px,calc(var(--gallery-top) - var(--scene-fade) + 355px - var(--fe)));
  -webkit-mask-image:linear-gradient(transparent -10px,rgba(0,0,0,.1) 90px,rgba(0,0,0,.3) 170px,rgba(0,0,0,.6) 250px,#000 360px,#000 var(--fe),rgba(0,0,0,.85) calc(var(--fe) + var(--fl) * .2),rgba(0,0,0,.6) calc(var(--fe) + var(--fl) * .45),rgba(0,0,0,.32) calc(var(--fe) + var(--fl) * .7),rgba(0,0,0,.12) calc(var(--fe) + var(--fl) * .9),transparent calc(var(--fe) + var(--fl))),linear-gradient(#000 85%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent -10px,rgba(0,0,0,.1) 90px,rgba(0,0,0,.3) 170px,rgba(0,0,0,.6) 250px,#000 360px,#000 var(--fe),rgba(0,0,0,.85) calc(var(--fe) + var(--fl) * .2),rgba(0,0,0,.6) calc(var(--fe) + var(--fl) * .45),rgba(0,0,0,.32) calc(var(--fe) + var(--fl) * .7),rgba(0,0,0,.12) calc(var(--fe) + var(--fl) * .9),transparent calc(var(--fe) + var(--fl))),linear-gradient(#000 85%,transparent);
  mask-composite:intersect}
/* Original photographs and colour treatment, held still. No depth mesh, moving filters, or soft duplicate textures. */
.scene--life .scene-art{inset:0 -6%;background:url('alpine-sky.webp') 58% 48%/cover no-repeat;filter:brightness(.96) saturate(1.04);animation:none;transform:scale(1.035)}
.scene-mountain{position:absolute;inset:0 -6%;background:url('mountain-foreground.webp') 58% 48%/cover no-repeat;filter:brightness(1.03) saturate(1.08);opacity:1;transform:scale(1.035);pointer-events:none;transform-origin:65% 65%}
.scene--life .scene-light{inset:0;background:linear-gradient(180deg,rgba(70,120,205,.3),rgba(84,132,214,.1) 30%,rgba(84,132,214,0) 50%),linear-gradient(90deg,rgba(5,12,24,.8),rgba(5,12,24,.5) 34%,rgba(5,12,24,.04) 70%),linear-gradient(180deg,rgba(9,20,37,.06) 52%,rgba(0,0,0,.72));animation:none}
.scene--life .scene-detail{background:none}
.scene-haze{position:absolute;left:0;right:0;top:var(--gallery-top);height:var(--gallery-height);background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 32%,rgba(0,0,0,.97) 64%,#000);
  -webkit-mask-image:linear-gradient(#000 -35px,transparent calc(var(--gallery-end) - var(--gallery-top))),linear-gradient(transparent,#000 28%,#000 73%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(#000 -35px,transparent calc(var(--gallery-end) - var(--gallery-top))),linear-gradient(transparent,#000 28%,#000 73%,transparent);mask-composite:intersect;pointer-events:none}
.atmosphere-scene.is-visible :is(.scene-art,.scene-light){animation-play-state:running}
.atmosphere-stage.is-paused :is(.scene-art,.scene-light){animation-play-state:paused}
@keyframes optical-drift{
  from{transform:translate3d(-1.4%,-.7%,0) rotate(var(--scene-turn)) scale(1.035)}
  to{transform:translate3d(2.1%,1.1%,0) rotate(var(--scene-turn)) scale(1.085)}
}
@keyframes optical-breathe{
  from{transform:translate3d(1.3%,-1%,0) rotate(var(--scene-turn)) scale(1.06)}
  to{transform:translate3d(-1.8%,1.4%,0) rotate(var(--scene-turn)) scale(1.025)}
}
#projects,#skills,#awards,#life,#open,#contact{isolation:isolate;--ink:#f5f7fc;--ink-2:#bdc5d9;--ink-3:#98a5bf;--ink-4:#8a97b0;--line:rgba(223,233,255,.1);--line-2:rgba(223,233,255,.2);--brand-3:#acc8ff;color:var(--ink)}
#projects>.wrap,#skills>.wrap,#awards>.wrap,#life>.wrap,#open>.wrap,#contact>.wrap{position:relative;z-index:1}
#projects{background:#080c19}
/* Colour is behind the surface, not an identical glow painted onto every card. Islands sit on a tinted fill over
   already smooth light, so they do not carry a live backdrop blur; only the nav, which crosses moving content, does. */
#projects .glass{isolation:isolate;background:rgba(8,13,29,.66);border:1px solid rgba(216,226,250,.27);box-shadow:0 2px 4px rgba(0,0,0,.18),0 26px 70px -32px rgba(0,0,0,.7)}
#projects .feature:not(.lavaiq-island)::after,#projects .workflow-toolkit::before{background:none}
#projects .lavaiq-island{background:rgba(9,10,23,.56);border-color:rgba(219,220,255,.29)}
#projects .lavaiq-wordmark{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:600;letter-spacing:.015em}
#projects .lavaiq-wordmark .lavaiq-first{margin-right:0}
/* LazuliQ follows LAVAIQ: badge, title, copy, chips and action on the left, the orb on the right, the same type. */
#projects .feature--lz{isolation:isolate;padding:clamp(28px,3.6vw,52px) clamp(28px,4.4vw,64px);grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:36px;font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(120deg,rgba(6,14,28,.96),rgba(8,20,42,.9) 70%,rgba(9,24,50,.94));border-color:rgba(159,193,240,.29);box-shadow:0 24px 58px -32px rgba(0,0,0,.7)}
#projects .feature--lz .photon-light{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 39% 88% at 80% 50%,rgba(31,77,181,.33),transparent 76%),radial-gradient(ellipse 34% 78% at 100% 75%,rgba(78,52,139,.13),transparent 80%)}
#projects .feature--lz .orb-slot{width:min(308px,92%)}
#projects .feature--lz .feature__body{justify-self:start;width:100%}
#projects .feature--lz .badge{padding:9px 12px;gap:9px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.015em;text-transform:none;color:#c6d0e6;background:rgba(120,160,255,.07);border-color:rgba(170,200,255,.2)}
/* set exactly like the LAVAIQ wordmark */
#projects .feature--lz h3{margin:27px 0 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:600;font-size:clamp(2.2rem,3.7vw,3rem);letter-spacing:.015em;line-height:1.1;color:#f7f7fc}
#projects .feature--lz .sub{margin-top:14px;font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:500;letter-spacing:-.02em;color:#9dbce9}
#projects .feature--lz .body{margin:20px 0 0;max-width:46ch;font-size:1rem;line-height:1.65;color:#aab3c6}
#projects .feature--lz .body b{color:#eef2fb}
#projects .feature--lz .chips{justify-content:flex-start;margin-top:25px}
#projects .feature--lz .chip{border-radius:8px;border:1px solid rgba(186,195,220,.15);background:rgba(156,171,198,.05);color:#a8b2c6;padding:9px 12px;font-size:14px;line-height:1.3}
#projects .feature--lz .link-arrow{margin-top:29px;border-radius:10px;background:#fafaff;color:#090c15;font-family:inherit;font-size:15px;font-weight:600;padding:16px 24px;box-shadow:0 16px 34px -20px rgba(221,223,255,.44)}
#projects .feature--lz .link-arrow:hover{background:#fff;box-shadow:0 18px 36px -18px rgba(150,180,255,.45)}
#projects .cards>.card{background:linear-gradient(160deg,rgba(17,25,43,.85),rgba(4,8,18,.83) 55%,rgba(14,23,42,.84));overflow:hidden}
#projects .cards>.workflow-card{isolation:isolate;background:linear-gradient(180deg,rgba(10,18,34,.9),rgba(7,13,27,.78));border-color:rgba(216,226,250,.27);box-shadow:0 2px 6px rgba(0,0,0,.18),0 26px 58px -30px rgba(0,0,0,.62)}
/* Rino uses the surface itself for separation, with no simulated glass rim. */
#projects .cards>.rino-card{isolation:isolate;background:linear-gradient(135deg,rgba(13,22,39,.83),rgba(7,12,24,.69));border-color:rgba(216,226,250,.27);box-shadow:0 24px 54px -32px rgba(0,0,0,.65)}
#projects .cards>.card.rino-card::before,#projects .cards>.card.rino-card::after{content:none}
#projects .cards>.card.workflow-card::before{content:none}
#projects .cards>.card.workflow-card::after{content:none}
/* R08 light inside the island; copy and toolkit remain sharp. It rises in from the bottom edge as the card arrives,
   drifts very slowly, and with a mouse leans a little towards the pointer (atmosphere.js). It does not jump on hover.
   The big field fades out inside the layer, so no blur filter is needed to soften its edge. */
#projects .workflow-light{position:absolute;left:-14%;right:-14%;bottom:-32%;height:76%;z-index:-1;pointer-events:none;opacity:.8;transform:translate3d(var(--wf-x,0px),var(--wf-y,0px),0);transition:opacity 1.4s var(--ease),transform 1.9s var(--ease-out);background:radial-gradient(42% 52% at 14% 80%,#164ea5,transparent),radial-gradient(38% 46% at 74% 54%,rgba(105,66,133,.72),transparent),radial-gradient(78% 44% at 56% 100%,#b5d8f0 0%,#6382cd 44%,transparent),radial-gradient(80% 56% at 50% 64%,#283d9a,transparent)}
.r-on #projects .workflow-card:not(.wf-in) .workflow-light{opacity:0;transform:translate3d(0,34%,0)}
#projects .workflow-card.wf-ready .workflow-light{transition:opacity 1.4s var(--ease),transform 1.2s var(--ease-out)}
@keyframes wf-drift{0%{translate:-1.8% 4px;scale:1}50%{translate:.8% -6px;scale:1.035}100%{translate:2.4% 1px;scale:1.012}}
@media(prefers-reduced-motion:no-preference){#projects .workflow-light{animation:wf-drift 15s ease-in-out infinite alternate;animation-play-state:paused}#projects .workflow-card.is-live .workflow-light{animation-play-state:running}}
html:is(.is-scrolling,.context-open) #projects .workflow-card .workflow-light{animation-play-state:paused}
#projects .cards>.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.035),transparent 34%,transparent 70%,rgba(230,239,255,.045))}
#projects .lavaiq-island::before{background:linear-gradient(90deg,transparent,rgba(216,211,255,.3),transparent)}
#projects .lavaiq-island::after{background:linear-gradient(90deg,rgba(8,9,21,.78),rgba(8,9,21,.63) 26%,rgba(8,9,21,.22) 53%,transparent 78%),linear-gradient(0deg,rgba(8,9,21,.6),transparent 36%,rgba(8,9,21,.3) 100%)}
#projects .lavaiq-island .body{color:#bec1d2}
#projects .chip{background:rgba(226,234,255,.055);border-color:rgba(226,234,255,.15);color:#c3cee3}
#projects .stats{background:rgba(4,8,18,.5);border-color:transparent;border-radius:20px}
#projects .stats div{background:none;position:relative}
#projects .stats .l{font-family:inherit;font-size:12px;line-height:1.4;letter-spacing:0;text-transform:none;color:#adb8ce}
#projects .stats div:nth-child(n+4)::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:rgba(209,222,244,.09)}
/* One coherent bottom-lit slab; facts share a grid instead of floating in a dark patch. */
#projects .lavaiq-island .stats{gap:0;border:1px solid rgba(180,196,223,.14);border-radius:20px;background:radial-gradient(ellipse 100% 80% at 70% 135%,rgba(67,64,137,.36),transparent 90%),linear-gradient(150deg,rgba(13,20,36,.94),rgba(6,11,22,.94));box-shadow:0 2px 4px rgba(0,0,0,.12),0 18px 38px -30px rgba(0,0,0,.7)}
#projects .lavaiq-island .stats div{padding:23px 18px 22px;display:flex;flex-direction:column;gap:9px}
#projects .lavaiq-island .stats .k{font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-size:clamp(1.35rem,2.1vw,1.78rem);line-height:1.2}
#projects .lavaiq-island .stats .l{margin-top:0;font-size:14px;line-height:1.45;color:#b8c3d7}
#projects .lavaiq-island .stats div:not(:nth-child(3n+1))::after{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:rgba(198,211,237,.09)}
@media(max-width:520px){#projects .lavaiq-island .stats div{padding:21px 14px}#projects .lavaiq-island .stats .k{font-size:1.35rem}#projects .lavaiq-island .stats div::after{content:none!important}#projects .lavaiq-island .stats div:nth-child(even)::after{content:""!important}#projects .lavaiq-island .stats div:nth-child(n+3)::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:rgba(209,222,244,.09)}}
#projects .stampline{font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;gap:8px 12px;color:#a8b6d0}
#projects .stampline__t{background:rgba(223,233,255,.045);border-color:rgba(223,233,255,.16);color:#b4c0d8}
#projects .icon-box{width:52px;height:52px;background:none;border:0;border-radius:0;flex:none}
#projects .workflow-copy .icon-box{width:42px;height:42px;color:#d8e6fa}
#projects .workflow-copy .workflow-glyph{width:36px;height:36px;fill:currentColor}
.dw-object{display:block;width:100%;height:100%;object-fit:contain}
#projects .tool-reels.is-animated .tool-window{height:180px;-webkit-mask-image:linear-gradient(transparent,#000 18px,#000 162px,transparent 180px);mask-image:linear-gradient(transparent,#000 18px,#000 162px,transparent 180px)}
#projects .tool-reels.is-animated .tool-window::before{top:68px;background:rgba(8,14,28,.48);border-color:rgba(203,216,243,.14);box-shadow:none}
#projects .rino-mark{display:block;width:100%;height:100%;font:600 48px/1 Inter,Arial,sans-serif;letter-spacing:-.06em;color:#d8e6fa}
#projects .tool-reel h6{color:#b2bed4}
#projects .tool-row{color:#f0f3fa}
#projects .tool-row-content{display:flex;align-items:center;gap:inherit;min-width:0;width:100%}
#skills{background:#030509}
#skills .sk-head{--ico:.74em;--shift:calc(.74em + .4em)}
#skills .sk-ico{top:.1em;width:var(--ico);height:var(--ico);color:#dce2ed;fill:currentColor}
#skills .sk-row{background:radial-gradient(ellipse 66% 130% at 0% 30%,rgba(27,62,122,.17),transparent 76%),radial-gradient(ellipse 50% 120% at 100% 85%,rgba(31,94,90,.09),transparent 77%),#04080f;border-radius:22px;margin-inline:-28px;padding-inline:28px;margin-bottom:24px;box-shadow:inset 0 0 0 1px rgba(213,226,249,.07)}
#skills .sk-row::before{inset:1px;border-radius:21px;background:radial-gradient(ellipse 85% 130% at var(--skill-blue-x,10%) 25%,rgba(47,89,178,.32),transparent 77%),radial-gradient(ellipse 72% 130% at var(--skill-purple-x,65%) var(--skill-purple-y,60%),rgba(82,44,135,.28),transparent 80%),radial-gradient(ellipse 58% 95% at 100% 80%,rgba(38,111,99,.12),transparent 80%);-webkit-mask-image:none;mask-image:none;opacity:0}
#skills .sk-glow{position:absolute;inset:1px;border-radius:21px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 85% 130% at var(--skill-blue-x,10%) 25%,rgba(47,89,178,.42),transparent 77%),radial-gradient(ellipse 72% 130% at var(--skill-purple-x,65%) var(--skill-purple-y,60%),rgba(82,44,135,.34),transparent 80%),radial-gradient(ellipse 58% 95% at 100% 80%,rgba(38,111,99,.14),transparent 80%);-webkit-mask-image:radial-gradient(550px circle at var(--mx,30%) var(--my,50%),#000,rgba(0,0,0,.7) 38%,transparent 83%);mask-image:radial-gradient(550px circle at var(--mx,30%) var(--my,50%),#000,rgba(0,0,0,.7) 38%,transparent 83%);opacity:0;transition:opacity .65s var(--ease-out)}
#skills .sk-row:nth-child(2){--skill-blue-x:25%;--skill-purple-x:40%;--skill-purple-y:10%}
#skills .sk-row:nth-child(3){--skill-blue-x:5%;--skill-purple-x:75%;--skill-purple-y:20%}
#skills .sk-row:nth-child(4){--skill-blue-x:35%;--skill-purple-x:90%;--skill-purple-y:80%}
#skills .sk-row.is-active::before{opacity:.48}
#skills .sk-lang::before{opacity:0;background:none}
#skills .sk-row::after,#skills .sk-lang::after{content:none}
.sk-rim{position:absolute;inset:1px;border-radius:21px;pointer-events:none;z-index:-1;opacity:0;transition:opacity .55s ease;-webkit-mask-image:radial-gradient(370px circle at var(--mx,30%) var(--my,50%),#000,transparent 78%);mask-image:radial-gradient(370px circle at var(--mx,30%) var(--my,50%),#000,transparent 78%)}
.sk-rim i{position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(166,205,224,.72);box-shadow:inset 0 0 8px rgba(72,138,196,.17),0 0 8px rgba(86,183,172,.14)}
@media(hover:hover) and (pointer:fine){#skills .sk-row:hover .sk-glow{opacity:.9}#skills .sk-row:hover .sk-rim{opacity:1}#skills .sk-list.has-active .sk-row:hover{opacity:1}}
#skills .sk-items li{color:#bdc6dc}
#skills .sk-row.is-active .sk-items li{color:#f0f3fc}
#skills .sk-list.has-active .sk-row:not(.is-active),#skills .sk-list.has-active .sk-lang:not(.is-active){opacity:.63}
/* One quiet language group, with a consistent baseline and no repeated tiles. */
#skills .sk-lang{grid-template-columns:1fr;row-gap:26px;opacity:1;margin-top:40px;padding:34px 38px;border-radius:24px;background:linear-gradient(140deg,rgba(24,38,64,.9),rgba(9,14,26,.92));border:1px solid rgba(201,220,249,.14);box-shadow:0 18px 50px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}
#skills .sk-lang__label{padding-top:0;font-family:inherit;font-weight:600;font-size:22px;line-height:1.3;letter-spacing:-.03em;color:#fff;text-transform:none}
#skills .sk-langs{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:28px}
#skills .sk-l{position:relative;flex-direction:row;align-items:center;gap:18px;min-width:0;padding:16px 18px;border-radius:16px;background:rgba(201,220,249,.045);border:1px solid rgba(201,220,249,.09)}
#skills .sk-l+.sk-l::before{content:none}
#skills .sk-l__flag{width:44px;font-size:40px;line-height:1;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
#skills .sk-l>div{gap:5px}
#skills .sk-l__name{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.03em;color:#fff;white-space:normal}
#skills .sk-l__lvl{font-family:inherit;font-size:15px;letter-spacing:0;line-height:1.5;color:#c3d0e4;text-transform:none;white-space:normal}
#skills .sk-list.has-active .sk-lang:not(.is-active){opacity:1}
#awards{background:#04060b;--gold:#cfbd96;--brand-2:#8ea8cf;--brand-3:#a2b4cc;--ink-2:#bcc0c8;--ink-3:#a0a6b2;--ink-4:#8e97a7}
#awards .spotlight{isolation:isolate;--ink-2:#d0cec8;background:radial-gradient(ellipse 100% 140% at 10% 0%,rgba(165,150,116,.1),transparent 66%),linear-gradient(138deg,rgba(36,35,31,.7),rgba(18,19,24,.6) 60%,rgba(33,31,26,.66));border-color:rgba(213,202,177,.25);box-shadow:0 2px 5px rgba(0,0,0,.16),0 24px 65px -35px rgba(0,0,0,.7)}
#awards .spotlight::after{background:radial-gradient(ellipse at 50% 50%,rgba(212,196,157,.06),transparent 70%)}
#awards .spotlight::before{content:none}
#awards .spotlight .crest{color:#d4c29a;background:rgba(206,187,144,.075);border-color:rgba(224,205,168,.22)}
#awards .spotlight .context-button,#awards .spotlight .stamp{color:#c9c0ad;border-color:rgba(220,206,177,.18);background:rgba(233,224,204,.035)}
#awards .spotlight .stamp{font-family:inherit;font-size:13px;letter-spacing:0}
#awards .award{isolation:isolate;border-radius:20px;background:linear-gradient(180deg,rgba(214,228,250,.035),transparent 120px),linear-gradient(145deg,rgba(12,22,36,.78),rgba(6,12,22,.75));border:1px solid rgba(193,215,235,.17);box-shadow:0 2px 4px rgba(0,0,0,.16),0 22px 44px -30px rgba(0,0,0,.75)}
#awards .award__rank{color:#c9c5ba;letter-spacing:.08em;font-family:inherit;font-size:12px}
#awards .award__rank.is-gold{color:#dbc48c}
#awards .award__rank.is-silver{color:#c6d1df}
#awards .award__rank.is-bronze{color:#d1a383}
#awards .award__rank.is-honor{color:#9dbde0}
#awards .award__year,#awards .award__issuer{color:#a4b2c8}
#awards .award p:not(.award__issuer){color:#bdc7d6;font-size:15px;line-height:1.65}
#awards .sub-head{color:#eef0f5}
#awards .sub-head svg{color:#9aa8bf}
#awards .awards__grid{align-items:start;column-gap:clamp(38px,5vw,72px)}
/* Both columns now start with their heading on one line; the timeline is the island that sits beside the first award. */
#awards .tl{--ip:clamp(24px,2.5vw,34px);isolation:isolate;padding:var(--ip) var(--ip) var(--ip) calc(var(--ip) + var(--tl-pad));border:1px solid rgba(193,215,235,.17);border-radius:24px;background:linear-gradient(180deg,rgba(214,228,250,.035),transparent 160px),linear-gradient(145deg,rgba(12,22,36,.78),rgba(6,12,22,.75));box-shadow:0 2px 4px rgba(0,0,0,.16),0 28px 64px -40px rgba(0,0,0,.75)}
#awards .tl::before{left:calc(var(--ip) + 5px);top:calc(var(--ip) + 8px);bottom:calc(var(--ip) + 24px);background:linear-gradient(#8c98a9,rgba(123,139,160,.15));opacity:.48}
#awards .tl__item::before{background:#060910;border-color:#65768f;box-shadow:0 0 0 4px #04060b}
#awards .tl__item.is-current::before{background:#8daacf;border-color:#a9bedc;box-shadow:0 0 0 4px #04060b,0 0 16px rgba(121,158,207,.2)}
#awards .tl__date{color:#9facbf;letter-spacing:.08em;font-family:inherit;font-size:12px}
#awards .tl__item::after{content:none}
#awards .tl__item+.tl__item{margin-top:16px}
#awards .tl__item>.institution-mark{grid-row:1 / span 2;margin-top:0}
#awards .tl__item p:not(.tl__date){grid-column:1 / -1}
#awards .tl__item p:not(.tl__role):not(.tl__date){color:#bdc7d6;font-size:15px;line-height:1.65}
#awards .tl__item .tl__role{color:#d0d4dc}
#awards .context-button{background:rgba(219,224,236,.035);border-color:rgba(210,218,238,.12);color:#b7c0cf}
#life{background:#111b2c;min-height:0;padding-bottom:clamp(66px,8vw,110px)}
#life .sec-head{margin-bottom:clamp(56px,7vw,96px)}
#life .lede{color:#d0d9e9;max-width:56ch}
#life .film{position:relative;z-index:1;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;isolation:isolate}
#life .shot{border-color:rgba(244,249,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 45px -24px rgba(0,0,0,.75)}
#life .film__btn{background:rgba(151,173,205,.12);border-color:rgba(242,248,255,.23);-webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%)}
#open{background:#0a141d}
#open .avail article{isolation:isolate;background:linear-gradient(135deg,rgba(15,23,37,.9),rgba(5,10,19,.89));border-color:rgba(203,221,244,.14);border-top-color:rgba(194,213,244,.28);box-shadow:0 2px 2px rgba(0,0,0,.15),0 18px 44px -32px rgba(0,0,0,.7)}
#open .avail article:nth-child(2){border-top-color:rgba(137,189,181,.27)}
#open .avail article:nth-child(3){border-top-color:rgba(180,154,223,.28)}
#open .lanes{position:relative;z-index:1;background:rgba(209,230,246,.025);border-color:rgba(218,237,249,.1)}
#open .tag{background:rgba(220,235,250,.04);border-color:rgba(220,235,250,.13);color:#c5d4e7}
#contact{background:#0b1725;border-top:0}
#contact::before{background:none}
/* The email action is a plain, confident control rather than a terminal-looking tile. */
#contact .btn--ghost{font-family:inherit;font-size:15px;font-weight:550;letter-spacing:-.015em;min-height:52px;padding:14px 23px;border-radius:14px;background:#edf2f9;color:#0b1423;border:1px solid rgba(255,255,255,.34);box-shadow:0 2px 4px rgba(0,0,0,.18),0 14px 32px -20px rgba(0,0,0,.65);-webkit-backdrop-filter:none;backdrop-filter:none}
#contact .btn--ghost svg{width:19px;height:19px}
#contact .btn--ghost:hover{background:#fff;border-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.16),0 18px 34px -18px rgba(14,29,60,.8)}
#contact .btn--ghost:focus-visible{outline:2px solid #9cbbef;outline-offset:5px}
#contact .btn--ghost:active{transform:translateY(0);background:#dce5f2}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){#projects .glass,#projects .cards>.card{background:#080d18}#projects .feature--lz{background:#081326}#awards .spotlight{background:linear-gradient(135deg,#24231f,#121318)}#awards .award,#awards .tl{background:#091426}#open .avail article{background:#0b1421}}
@media(max-width:940px){#projects .feature--lz{grid-template-columns:minmax(0,1fr);gap:0}#projects .feature--lz .feature__media{order:0;margin-top:26px}#projects .feature--lz .orb-slot{width:min(208px,65%)}#projects .lavaiq-island::after{background:linear-gradient(180deg,rgba(8,9,21,.75),rgba(8,9,21,.56) 40%,rgba(8,9,21,.08) 80%)}.scene--life .scene-art,.scene--life .scene-art::before,.scene-mountain,.scene-mountain::before{background-position:65% 48%}}
@media(max-width:640px){
  .colour-field{left:-28%;right:-28%}
  .scene-landscape{height:660px}
  .scene--life .scene-art,.scene-mountain{inset:0 -8%}
  .scene--life .scene-art,.scene--life .scene-art::before,.scene-mountain,.scene-mountain::before{background-position:65% 48%}
  #skills .sk-row{margin-inline:-18px;padding-inline:18px}
  #projects .feature--lz{padding:28px 22px;border-radius:22px}
  #projects .feature--lz .chip{padding:9px 6px;font-size:13px}
  #skills .sk-row::after{left:18px;right:18px}
  #skills .sk-glow,#skills .sk-rim{display:none}
  #awards .tl{--ip:20px}
  #life{min-height:0;padding-bottom:64px}
  #life .sec-head{margin-bottom:56px}
}
@media(max-width:520px){#projects .stats div:nth-child(3)::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:rgba(209,222,244,.09)}}
@media(max-width:760px) and (min-width:561px){#skills .sk-l{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}}
@media(max-width:560px){#skills .sk-lang{padding:26px 20px;row-gap:20px}#skills .sk-langs{grid-template-columns:1fr;gap:12px}#skills .sk-l{flex-direction:row;gap:16px}#skills .sk-l__flag{width:38px;font-size:34px;flex:none}#skills .sk-l__name{font-size:19px}}
@media(hover:none),(pointer:coarse){#skills .sk-glow,#skills .sk-rim{display:none}}
@media(prefers-reduced-motion:reduce){.scene-parallax{transform:none;transition:none}.atmosphere-stage .scene-art,.atmosphere-stage .scene-light{animation:none;transform:rotate(var(--scene-turn)) scale(1.035)}.scene-mountain,.scene--life .scene-art{transform:scale(1.035);transition:none}.sk-rim,.sk-glow,#skills .sk-row::before,#projects .workflow-light{transition:none}#projects .workflow-light{transform:none}}
@media(prefers-reduced-transparency:reduce){#projects .glass,#projects .cards>.card,#open .avail article{-webkit-backdrop-filter:none;backdrop-filter:none;background:#080d18}#projects .feature--lz{background:#081326}#awards .spotlight{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(135deg,#24231f,#121318)}#awards .award,#awards .tl{-webkit-backdrop-filter:none;backdrop-filter:none;background:#091426}.scene--life .scene-detail,.scene-haze,.scene-landscape::before,.scene-landscape::after{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Keep the descriptive AI value on one line even on a 320px phone, with aligned label baselines. */
@media(max-width:520px){
  #projects .lavaiq-island .stats .k{min-height:1.62rem;line-height:1.62rem}
  #projects .lavaiq-island .stats div:nth-child(3) .k{font-size:clamp(1rem,5vw,1.2rem);white-space:nowrap}
}

/* Keep every tool name readable inside the existing two-column reels on narrow phones. */
@media(max-width:360px){
  #projects .tool-row{gap:6px;padding-inline:4px;font-size:.75rem}
  #projects .tool-row img{width:18px;height:18px}
  #projects .tool-row-content span{white-space:nowrap;overflow-wrap:normal}
}

/* Languages: the island arrives first, then each language is introduced in turn. The flag turns in on its edge, the
   name is wiped in from the left, the level follows, and the hairline between languages draws downwards. */
@media(prefers-reduced-motion:no-preference){
  #skills .sk-lang:not(.in) .sk-l{opacity:1;transform:none;filter:none}
  #skills .sk-l:nth-child(1){--ld:.2s}#skills .sk-l:nth-child(2){--ld:.5s}#skills .sk-l:nth-child(3){--ld:.8s}
  #skills .sk-l__flag{transition:opacity .7s var(--ease-out) var(--ld,.2s),transform 1.35s cubic-bezier(.16,1,.3,1) var(--ld,.2s)}
  #skills .sk-lang:not(.in) .sk-l__flag{opacity:0;transform:perspective(380px) rotateY(-95deg) scale(.55)}
  #skills .sk-l__name{display:block;transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) calc(var(--ld,.2s) + .12s),opacity .5s ease calc(var(--ld,.2s) + .12s),transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--ld,.2s) + .12s)}
  #skills .sk-lang:not(.in) .sk-l__name{clip-path:inset(-.1em 100% -.1em 0);opacity:0;transform:translate3d(-10px,0,0)}
  #skills .sk-l__lvl{transition:opacity .9s var(--ease-out) calc(var(--ld,.2s) + .4s),transform 1s var(--ease-out) calc(var(--ld,.2s) + .4s)}
  #skills .sk-lang:not(.in) .sk-l__lvl{opacity:0;transform:translate3d(0,7px,0)}
  #skills .sk-l+.sk-l::before{transform-origin:50% 0;transition:transform 1.1s var(--ease-out) calc(var(--ld,.2s) - .1s)}
  #skills .sk-lang:not(.in) .sk-l+.sk-l::before{transform:scaleY(0)}
}

/* Honors & Milestones opens in the Mono Noir direction of the design guide (reference R12): no colour, a wide soft
   cone of grey light falling from the top of the section onto the EUCYS card like a stage spotlight, and a faint pool
   where it lands. The cone is two conic gradients whose edges feather with distance, as real light does, so it needs
   no blur filter. It is static (outside the parallax plane) and starts exactly at the section's top edge. Lower down
   the section returns to the page's usual navy light behind the lists (atmosphere.js, 'honors-lower'). */
.honors-light{position:absolute;left:0;right:0;top:var(--scene-fade);height:calc(var(--scene-h,3000px) * .62);pointer-events:none;
  background:
    radial-gradient(ellipse 42% 16% at 50% 0%,rgba(246,222,170,.16),transparent 72%),
    conic-gradient(from 152deg at 50% -40%,transparent 0deg,rgba(236,214,166,.05) 8deg,rgba(236,214,166,.16) 17deg,rgba(250,232,190,.27) 28deg,rgba(236,214,166,.16) 39deg,rgba(236,214,166,.05) 48deg,transparent 56deg),
    radial-gradient(ellipse 44% 14% at 50% 44%,rgba(240,210,150,.16),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.35) 160px,#000 460px,#000 44%,transparent 96%);mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.35) 160px,#000 460px,#000 44%,transparent 96%)}
@media(max-width:640px){.honors-light{height:calc(var(--scene-h,5000px) * .36);background:
    conic-gradient(from 148deg at 50% -30%,transparent 0deg,rgba(236,214,166,.05) 10deg,rgba(236,214,166,.17) 22deg,rgba(250,232,190,.28) 32deg,rgba(236,214,166,.17) 42deg,rgba(236,214,166,.05) 54deg,transparent 64deg),
    radial-gradient(ellipse 90% 14% at 50% 50%,rgba(240,210,150,.15),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 160px,#000 42%,transparent 96%);mask-image:linear-gradient(180deg,transparent,#000 160px,#000 42%,transparent 96%)}}
/* the heading is set like R12: large and lighter, its last word greyed */
#awards .sec-head h2{font-weight:500;letter-spacing:-.045em}
#awards .sec-head h2 .tail{color:inherit}
/* the EUCYS card is neutral graphite glass lit from above; its gold type stays */
#awards .spotlight{background:radial-gradient(ellipse 50% 40% at 50% 0%,rgba(244,212,140,.22),transparent 72%),radial-gradient(ellipse 70% 60% at 100% 100%,rgba(176,136,62,.14),transparent 70%),linear-gradient(140deg,rgba(46,38,22,.86),rgba(20,17,12,.88) 55%,rgba(38,31,18,.86));border-color:rgba(226,192,120,.28);border-top-color:rgba(246,214,150,.55);box-shadow:inset 0 1px 0 rgba(255,226,170,.14),0 2px 4px rgba(0,0,0,.2),0 40px 100px -40px rgba(0,0,0,.9),0 0 80px -30px rgba(230,190,110,.25)}
#awards .spotlight .crest{color:#f0cf86;background:rgba(240,200,120,.1);border-color:rgba(240,205,135,.32)}
#awards .spotlight .context-button,#awards .spotlight .stamp{color:#e6d6b2;border-color:rgba(232,200,140,.26);background:rgba(240,210,150,.06)}

/* Award cards: light rises from the bottom edge in the colour of the result (reference R08), quietly, behind sharp text.
   Gold, silver and bronze read as metals; the honour is a cool steel blue; the certificate stays neutral. */
#awards .award{--rk:150,160,180;--rk2:90,100,120;position:relative;overflow:hidden}
#awards .award:has(.is-gold){--rk:232,194,110;--rk2:150,108,40}
#awards .award:has(.is-silver){--rk:208,218,232;--rk2:120,132,152}
#awards .award:has(.is-bronze){--rk:214,142,96;--rk2:128,72,44}
#awards .award:has(.is-honor){--rk:132,176,236;--rk2:62,92,170}
#awards .award{border-color:rgba(var(--rk),.18);border-bottom-color:rgba(var(--rk),.34)}
/* EUCYS: same card family, gold rising from below, no icon tile */

#awards .spotlight{background:radial-gradient(ellipse 60% 70% at 25% 112%,rgba(150,108,40,.42),transparent 70%),radial-gradient(ellipse 55% 60% at 74% 116%,rgba(240,200,120,.3),transparent 72%),radial-gradient(ellipse 50% 30% at 50% 0%,rgba(244,212,140,.12),transparent 72%),linear-gradient(180deg,rgba(18,17,15,.9),rgba(14,12,9,.88));border-color:rgba(232,194,110,.2);border-top-color:rgba(246,214,150,.4);border-bottom-color:rgba(240,200,120,.45)}


/* EUCYS: the trophy (top left) and the EUCYS plate (top right) sit on one line, the same size */
#awards .spotlight{--sp:clamp(20px,2.6vw,34px);--mk:clamp(48px,4.6vw,62px)}
#awards .spotlight>.institution-mark{position:absolute;top:var(--sp);right:var(--sp);height:auto;min-height:var(--mk);margin:0}
#awards .spotlight h3{margin-top:calc(var(--mk) + 18px)}
/* stronger, richer rank light; gold and bronze most */
#awards .award{box-shadow:inset 0 -1px 0 rgba(var(--rk),.28),0 2px 4px rgba(0,0,0,.16),0 22px 44px -30px rgba(0,0,0,.75)}
#awards .sub-head svg{width:19px;height:19px;color:#d9dde6}

#awards .spotlight{--rk:240,200,120;--rk2:150,108,40;background:radial-gradient(ellipse 50% 30% at 50% 0%,rgba(244,212,140,.1),transparent 72%),linear-gradient(180deg,rgba(18,17,15,.92),rgba(14,12,9,.9))}
#awards .spotlight::before{content:none}
/* the EUCYS trophy: flat, a thin gold line glyph inside a hairline ring */
#awards .spotlight .crest{position:absolute;top:var(--sp);left:var(--sp);display:grid;place-items:center;width:var(--mk);height:var(--mk);margin:0;border-radius:50%;color:#ecc979;background:none;border:1.5px solid rgba(236,201,121,.55);box-shadow:none}
#awards .spotlight .crest svg{width:44%;height:44%}
/* the coin */
#awards .coin{position:absolute;left:50%;top:calc(50% + 6px);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;z-index:3;pointer-events:none;opacity:0;
  font:600 27px/1 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.04em;color:rgba(30,22,8,.82);
  background:linear-gradient(125deg,rgba(255,255,255,.28),transparent 37%,rgba(0,0,0,.12) 64%,rgba(255,255,255,.14)),linear-gradient(150deg,rgb(var(--rk)) 0%,rgb(var(--rk)) 46%,rgb(var(--rk2)) 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),inset 0 0 0 3px rgba(0,0,0,.16),inset 0 0 0 5px rgba(255,255,255,.09)}
#awards .award:has(.is-honor) .coin,#awards .award:has(.is-silver) .coin{color:rgba(16,22,34,.82)}

/* waiting state: title, rank and logo only */
#awards .award.coin-wait>p,#awards .award.coin-wait>.context-button{opacity:0;transform:translate3d(0,14px,0)}
#awards .award>p,#awards .award>.context-button{transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}

/* Card light, exactly the guide's card--glow (7.5): a blurred layer bigger than the card and clipped by it, deep on the
   lower left, warm to the right, a pale lit edge at the bottom and the body light above, in each award's metal. */
#awards .award,#awards .spotlight{--deep:120,84,30;--mid:176,132,52;--warm:226,172,84;--hot:255,240,206}
#awards .award:has(.is-silver){--deep:66,76,96;--mid:128,138,158;--warm:190,200,216;--hot:255,255,255}
#awards .award:has(.is-bronze){--deep:112,52,26;--mid:164,88,48;--warm:214,138,92;--hot:255,222,196}
#awards .award:has(.is-honor){--deep:40,62,190;--mid:76,96,210;--warm:140,168,240;--hot:232,240,255}
#awards .award:not(:has(.award__rank[class*="is-"])){--deep:58,78,110;--mid:96,118,150;--warm:150,172,202;--hot:236,242,250}
#awards .award>.light,#awards .spotlight>.light{position:absolute;left:-14%;right:-14%;bottom:-14%;height:74%;z-index:-1;pointer-events:none;opacity:.72;transform-origin:50% 100%;transition:opacity 1.6s var(--ease-out),transform 1.8s var(--ease-out)}
/* the blur sits on an inner layer that never changes, so it is drawn once and the wrapper only slides and fades it */
#awards .award>.light::before,#awards .spotlight>.light::before{content:"";position:absolute;inset:0;filter:blur(22px);
  background:radial-gradient(42% 56% at 14% 80%,rgba(var(--deep),.95),transparent),radial-gradient(38% 48% at 74% 54%,rgba(var(--warm),.55),transparent),
    radial-gradient(78% 44% at 56% 100%,rgba(var(--hot),.85) 0%,rgba(var(--warm),.6) 44%,transparent),radial-gradient(80% 78% at 50% 58%,rgba(var(--mid),.5),transparent)}
#awards .spotlight>.light{height:62%;opacity:.6}
#awards .award.coin-wait>.light{opacity:0;transform:scale(.06)}
#awards .award.coin-wait:not(:has(.coin))>.light{transform:scale(.3,.12)}
#awards .spotlight::after{content:none}

/* Coin sequence. The coin eases in, falls, and in its last stretch melts: it widens, softens and fades into the light,
   which rises from that moment. The description follows the light, the button arrives as the light settles. */
#awards .award.coin-go .coin{animation:coin-fall 1.08s both;will-change:transform,opacity,filter}
#awards .award.coin-done .coin{display:none;animation:none;will-change:auto}
#awards .award.coin-go>.light{opacity:.72;transform:none;transition:opacity .5s ease .74s,transform 1.85s cubic-bezier(.16,.8,.2,1) .74s}
#awards .award.coin-go>p{opacity:1;transform:none;transition-delay:1.05s}
#awards .award.coin-go>p.award__issuer{transition-delay:1.25s}
#awards .award.coin-go>.context-button{opacity:1;transform:none;transition-delay:1.95s}
/* the certificate has no coin: its light blooms from the centre of the bottom edge instead */
#awards .award.coin-go:not(:has(.coin))>p{transition-delay:.35s}
#awards .award.coin-go:not(:has(.coin))>p.award__issuer{transition-delay:.47s}
#awards .award.coin-go:not(:has(.coin))>.context-button{transition-delay:.85s}
/* borders: glow cards draw no coloured border (guide 7.5); one quiet hairline and a soft shadow */
#awards .award,#awards .spotlight{border:1px solid rgba(255,255,255,.07)!important;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 30px 60px -36px rgba(0,0,0,.85)!important}
#awards .spotlight::before{content:none!important}

#awards .award.coin-go>p{transition-delay:1.2s}
#awards .award.coin-go>p.award__issuer{transition-delay:1.33s}
#awards .award.coin-go>.context-button{transition-delay:1.68s}
#awards .award.coin-go:not(:has(.coin))>.light{transition-delay:.2s}


/* One element. The coin falls, slows just above the bottom edge, then blurs more and more while it stretches out to
   both sides and lifts, fading as the card's light rises under it. The blur is applied to the small coin before it is
   scaled, so the browser blurs a 64px object, not the whole card. */
#awards .coin>i{font-style:normal;transition:opacity .3s ease}
#awards .award.coin-go .coin>i{animation:coin-glyph 1.47s both}
@keyframes coin-glyph{0%,58%{opacity:1}70%,100%{opacity:0}}
@keyframes coin-fall{
  0%{opacity:0;transform:translateY(-14px) rotate(-8deg) scale(.86);filter:blur(0);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  16%{opacity:1;transform:rotate(-3deg);filter:blur(0);animation-timing-function:cubic-bezier(.5,0,.9,.65)}
  58%{opacity:1;transform:translateY(var(--drop,300px)) rotate(3deg) scale(1);filter:blur(0);animation-timing-function:cubic-bezier(.1,.5,.4,1)}
  100%{opacity:0;transform:translate3d(0,var(--drop,300px),0) scale(2.1);filter:blur(15px)}}
#awards .award.coin-go:not(:has(.coin))>.light{transition-delay:.2s}

/* Smaller cards for the minor certificates: title, issuer and the explainer button only. */
#awards .award--compact{padding:14px 18px 16px;margin-bottom:10px;border-radius:16px;column-gap:12px}
#awards .award--compact .award__meta{margin-bottom:5px}
#awards .award--compact h4{font-size:.94rem;line-height:1.36;margin-bottom:0}
#awards .award--compact p:not(.award__issuer){display:none}
#awards .award--compact .award__issuer{margin-top:7px;padding-top:0;border-top:0;font-size:11px}
#awards .award--compact>.context-button{margin-top:10px}
#awards .award--compact>.institution-mark{width:40px;height:40px;opacity:.9}
#awards .award--compact>.institution-mark img{width:30px;height:30px}

/* Birds fly across the sky layer, behind the mountain silhouette. */
.scene-birds{position:absolute;inset:0 -6%;width:112%;height:100%;pointer-events:none}
@media(prefers-reduced-motion:reduce){.scene-birds{display:none}}

/* Phones: the side shade built for wide screens covers most of a narrow one, so the mountain looked dim. Keep it light and let the text sit on a soft top-down shade instead. */
@media(max-width:640px){
  .scene--life .scene-light{background:linear-gradient(180deg,rgba(70,120,205,.22),rgba(84,132,214,.06) 28%,rgba(84,132,214,0) 46%),linear-gradient(90deg,rgba(5,12,24,.34),rgba(5,12,24,.12) 55%,rgba(5,12,24,0) 80%),linear-gradient(180deg,rgba(9,20,37,.04) 45%,rgba(0,0,0,.72))}
  .scene--life .scene-art{filter:brightness(1.02) saturate(1.1)}
  .scene-mountain{filter:brightness(1.14) saturate(1.12)}
}