/* Deft Digital Media — Home light and luminosity (October 17, 2026). Follows design-system/DECISIONS.md 5b:
   one white light from the upper left, split into blue and Sunflower only at an edge. Contour light, switch-on,
   glint, blur-focus, backlit glass and the lens portal. Nothing here loops by itself; reduced motion means lit
   and still. scripts/light.js adds .ddm-lit-ready and drives the closing portal and glints. Blue is a trace only:
   links, focus rings, step numbers, small dots, progress lines and light edges. */

/* Blue tokens (--blue, --blue-ink, --blue-light) live with the other colour tokens in home.css */

/* Links and focus: Blue ink with a 1.5px underline on light, Blue light on dark. Focus rings never yellow. */
.ddm-x .ddm-link { color:var(--blue-ink); text-decoration-color:currentColor; text-decoration-thickness:1.5px; text-underline-offset:5px; }
.ddm-x .ddm-link:hover { text-underline-offset:3px; }
.ddm-x :is(.ddm-obsidian) .ddm-link, .ddm-x .ddm-link-light { color:var(--blue-light); }
.ddm-x :is(a,button,input):focus-visible { outline:2px solid var(--blue-ink); outline-offset:3px; }
.ddm-x :is(.ddm-obsidian,.ddm-nav.is-dark,.ddm-portal) :is(a,button):focus-visible { outline-color:#fff; }

/* ---------- Contour light: a short arc traces the edge once on arrival, then orbits on hover or focus ---------- */
@property --rim { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.ddm-x .ddm-contour { position:relative; isolation:isolate; }
.ddm-x .ddm-contour::before { content:""; position:absolute; inset:0; z-index:6; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--rim),transparent 0deg 214deg,rgb(59 91 255/.35) 262deg,rgb(125 147 255/.85) 290deg,#fff 312deg,rgb(255 199 0/.9) 326deg,transparent 342deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0; transition:opacity .4s; }
.ddm-x .ddm-contour.is-traced::before { animation:ddm-rim-trace 2.1s cubic-bezier(.5,.05,.3,1) calc(var(--i,0) * 170ms + 200ms) 1 both; }
@media (hover:hover) and (pointer:fine) {
  .ddm-x .ddm-contour:is(:hover,:focus-visible,:focus-within)::before { opacity:1; animation:ddm-rim-orbit 3.6s linear infinite; }
}
.ddm-x .ddm-contour:focus-visible::before { opacity:1; animation:ddm-rim-orbit 3.6s linear infinite; }
@keyframes ddm-rim-trace { 0% { --rim:0deg; opacity:0 } 12% { opacity:1 } 82% { opacity:1 } 100% { --rim:360deg; opacity:0 } }
@keyframes ddm-rim-orbit { to { --rim:360deg; } }

/* ---------- light-double-yellow/blue (named by Daniel, Oct 18) ----------
   The hero and Our work lens rim on any container: a blue arc and a Sunflower arc, each with a white core, on opposite sides,
   chasing each other round the edge in one line of light, continuously. Add class .ddm-light-double (it uses ::after, so it sits
   happily with .ddm-contour's ::before). First used on the project posts' live window. Reduced motion: the arcs rest. */
.ddm-x .ddm-light-double { position:relative; isolation:isolate; }
.ddm-x .ddm-light-double::after { content:""; position:absolute; inset:0; z-index:7; border-radius:inherit; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--rim,0deg),transparent 0deg,rgb(59 91 255/.5) 30deg,rgb(59 91 255) 60deg,#fff 72deg,rgb(59 91 255/.9) 84deg,transparent 125deg 180deg,rgb(255 199 0/.5) 210deg,rgb(255 199 0) 240deg,#fff 252deg,rgb(255 199 0/.9) 264deg,transparent 305deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 2px rgb(255 255 255/.9)); animation:ddm-rim-orbit 6s linear infinite; }
@media (prefers-reduced-motion:reduce) { .ddm-x .ddm-light-double::after { animation:none; --rim:300deg; } }
/* On light surfaces the white core disappears, so the arc runs a little wider there */
.ddm-x .ddm-btn.ddm-contour::before { inset:-2px; padding:2px; }

/* ---------- Glint: one narrow white sweep through text, never looping (dark surfaces only) ---------- */
.ddm-x .ddm-glint { --g-base:currentColor; --g-edge:#fff7df; --g-light:#fff; }
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .ddm-x .ddm-glint.is-glinting { background-image:linear-gradient(110deg,var(--g-base) 0 40%,var(--g-edge) 46%,var(--g-light) 49% 51%,var(--g-edge) 54%,var(--g-base) 60% 100%);
    background-size:300% 100%; background-position:100% 50%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    animation:ddm-glint 1.5s cubic-bezier(.45,0,.25,1) 1 both; }
}
.ddm-x .ddm-hw h2 .ddm-glint { --g-base:var(--sun); }
@keyframes ddm-glint { from { background-position:100% 50%; } to { background-position:0% 50%; } }

/* ---------- Showcase: screens switch on like a lamp as each project arrives; the covered one softens ---------- */
.ddm-x .ddm-sc-screen::before { content:""; position:absolute; inset:0; z-index:3; background:#050506; opacity:0; pointer-events:none; }
.ddm-x.ddm-lit-ready .ddm-sc-ch:not(.is-lit) .ddm-sc-screen::before { opacity:.84; }
.ddm-x.ddm-lit-ready .ddm-sc-ch.is-lit .ddm-sc-screen::before { animation:ddm-switch-on 1.1s steps(1,end) .1s both; }
@keyframes ddm-switch-on { 0% { opacity:.84 } 6% { opacity:.3 } 10% { opacity:.78 } 17% { opacity:.15 } 22% { opacity:.55 } 34%,100% { opacity:0 } }
/* Backlit glass on the screen: a white inner rim and a soft inner glow, strongest right after switch-on */
.ddm-x .ddm-sc-screen { box-shadow:inset 0 0 0 1px rgb(255 255 255/.5); }
.ddm-x .ddm-sc-media { transition:filter .2s linear; }

/* ---------- How it works: blue step numbers (Blue light on obsidian), lit when their step opens ---------- */

/* ---------- 05 Closing: the lens portal. The oval opens onto the dark number field and grows until you step through it,
   into the last call to action. Base (no script, reduced motion): a still, open dark window holding the call to action.
   .is-live (scripts/light.js) pins it and drives the opening with CSS variables. Sunflower is text only here (DECISIONS.md). */
.ddm-x .ddm-portal { position:relative; background:var(--obsidian); color:#fff; padding:clamp(12px,2.4vw,28px) max(clamp(12px,2.4vw,28px),env(safe-area-inset-right,0px)) clamp(12px,2.4vw,28px) max(clamp(12px,2.4vw,28px),env(safe-area-inset-left,0px)); }
.ddm-x .ddm-portal-dark { position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none; }
.ddm-x .ddm-portal.is-live .ddm-portal-dark { top:34%; }
.ddm-x .ddm-portal-words, .ddm-x .ddm-portal-hint { display:none; }
.ddm-x .ddm-portal-lens { position:relative; width:100%; margin-inline:auto; }
.ddm-x .ddm-portal-win, .ddm-x .ddm-portal-rim { position:absolute; inset:0; border-radius:var(--r,28px); }
.ddm-x .ddm-portal-win { position:relative; overflow:hidden; background:#050506; isolation:isolate;
  box-shadow:0 0 0 1px rgb(255 255 255/calc(var(--edge,.5) * .7)), 0 0 calc(10px + var(--glow,0) * 34px) calc(var(--glow,0) * 6px) rgb(255 255 255/calc(.08 + var(--glow,0) * .67)), 0 0 calc(var(--glow,0) * 110px) calc(var(--glow,0) * 18px) rgb(255 255 255/calc(var(--glow,0) * .12)); }
/* What the lens shows: the number field, fixed to the screen and magnified, so the oval reads as a hole in the page, not a picture */
.ddm-x .ddm-portal-inner { position:relative; background:var(--obsidian); }
.ddm-x .ddm-portal-inner .ddm-digits { -webkit-mask:radial-gradient(ellipse 85% 85% at 50% 50%,#000 45%,transparent 100%); mask:radial-gradient(ellipse 85% 85% at 50% 50%,#000 45%,transparent 100%); }
.ddm-x .ddm-portal-inner .ddm-grain { mix-blend-mode:normal; opacity:.14; }
.ddm-x .ddm-portal-inner::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 45% 40% at 30% 22%,rgb(255 255 255/.10),transparent 70%); }

/* Glare from the upper-left light, gone once the window is open */
.ddm-x .ddm-portal-win::before { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none; opacity:var(--glare,0);
  background:radial-gradient(circle at 30% 18%,rgb(255 255 255/.55),rgb(255 255 255/0) 22%),radial-gradient(circle at 70% 86%,rgb(255 199 0/.18),rgb(255 199 0/0) 30%); }
/* Backlit rim, like the salon mirrors */
.ddm-x .ddm-portal-win::after { content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none;
  opacity:var(--edge,.35); box-shadow:inset 0 0 0 2px rgb(255 255 255/.92), inset 0 0 26px 5px rgb(255 255 255/.4), inset 0 -18px 40px rgb(0 0 0/.18); }

/* The call to action, inside the window */
.ddm-x .ddm-portal-copy { position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; margin-inline:auto; width:min(100%,980px); padding:clamp(72px,10vw,140px) clamp(16px,4vw,40px); text-align:center; }
.ddm-x .ddm-portal-copy::before { content:""; position:absolute; inset:-10% -20%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 50% 50% at 50% 50%,rgb(11 11 12/.82),rgb(11 11 12/0) 72%); }
.ddm-x .ddm-portal-copy .ddm-eyebrow { margin:0 0 18px; color:rgb(255 255 255/.6); }
.ddm-x .ddm-portal-chip { display:inline-flex; align-items:center; gap:9px; margin:0 0 28px; padding:9px 15px; border-radius:999px; font:500 12px/1.2 var(--mono); letter-spacing:.04em; color:rgb(255 255 255/.86); background:rgb(255 255 255/.1); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgb(255 255 255/.25); }
.ddm-x .ddm-portal-chip i { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue); }
.ddm-x .ddm-portal-copy h2 { margin:0 0 26px; color:#fff; font:700 clamp(2.6rem,min(7.6vw,11.5vh),7.4rem)/.9 var(--sans); letter-spacing:-.062em; text-shadow:0 0 40px rgb(255 255 255/.1); }
.ddm-x .ddm-portal-mark { color:var(--sun); text-shadow:0 0 34px rgb(255 199 0/.32); }
.ddm-x .ddm-portal.is-waiting .ddm-portal-mark { color:rgb(255 255 255/.3); text-shadow:none; }
.ddm-x .ddm-portal.is-lit .ddm-portal-mark { animation:ddm-sun-text-on 1.1s steps(1,end) .15s 1 both; }
@keyframes ddm-sun-text-on { 0% { color:rgb(255 255 255/.3); text-shadow:none } 7% { color:var(--sun) } 12% { color:rgb(255 255 255/.4); text-shadow:none } 19% { color:var(--sun) } 25% { color:rgb(255 199 0/.5) } 34%,100% { color:var(--sun); text-shadow:0 0 34px rgb(255 199 0/.32) } }
.ddm-x .ddm-portal-lede { max-width:540px; margin:0 0 34px; color:rgb(255 255 255/.72); font-size:1.1rem; }
.ddm-x .ddm-portal-copy .ddm-fine { margin:22px 0 0; max-width:46ch; color:rgb(255 255 255/.5); }
.ddm-x .ddm-btn-ghost-dark { background:rgb(255 255 255/.08); color:#fff; box-shadow:inset 0 0 0 1px rgb(255 255 255/.32); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.ddm-x .ddm-btn-ghost-dark:hover { background:rgb(255 255 255/.15); }

.ddm-x .ddm-portal-rim { inset:-1px; z-index:6; pointer-events:none; }
.ddm-x .ddm-portal-rim.ddm-contour::before { padding:2px; }
.ddm-x .ddm-portal-rim.is-traced::before { animation-duration:2.4s; animation-delay:.1s; }

.ddm-x .ddm-portal.is-live { height:340vh; padding:0; background:var(--canvas); }
.ddm-x .ddm-portal.is-live .ddm-portal-stage { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--stage-bg,var(--canvas)); }
.ddm-x .ddm-portal.is-live .ddm-portal-lens { position:absolute; left:50%; top:50%; width:var(--w,300px); height:var(--h,500px); transform:translate(-50%,-50%); }
.ddm-x .ddm-portal.is-live .ddm-portal-win { position:absolute; }
/* Live: the view inside stays screen-sized and centered on the screen while the oval grows around it */
.ddm-x .ddm-portal.is-live .ddm-portal-inner { position:absolute; left:50%; top:50%; width:100vw; height:100vh; height:100svh; transform:translate(-50%,-50%) scale(var(--zoom,1)); }
.ddm-x .ddm-portal.is-live .ddm-portal-copy { position:absolute; left:50%; top:50%; padding:calc(var(--nav-h,64px) * .6) 16px 0; opacity:var(--copy,1); transform:translate(-50%,calc(-50% + (1 - var(--copy,1)) * 18px)); }
.ddm-x .ddm-portal.is-live:not(.is-open) .ddm-portal-copy { pointer-events:none; }
.ddm-x .ddm-portal.is-live .ddm-portal-words { display:block; position:absolute; inset:0; margin:0; pointer-events:none; font:600 clamp(40px,6.2vw,104px)/1 var(--sans); letter-spacing:-.055em; color:var(--words,var(--ink)); }
.ddm-x .ddm-portal-words span { position:absolute; top:50%; white-space:nowrap; will-change:transform; }
.ddm-x .ddm-portal-words .w1 { right:calc(50% + var(--lw,150px) + 3vw); transform:translate(calc(var(--spread,0px) * -1),-50%); }
.ddm-x .ddm-portal-words .w2 { left:calc(50% + var(--lw,150px) + 3vw); transform:translate(var(--spread,0px),-50%); }
.ddm-x .ddm-portal.is-live .ddm-portal-hint { display:block; position:absolute; left:50%; bottom:max(22px,env(safe-area-inset-bottom,0px)); transform:translateX(-50%); margin:0; text-align:center; font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); opacity:var(--hint,1); }
.ddm-x .ddm-portal-hint i { display:block; width:72px; height:2px; margin:10px auto 0; border-radius:2px; background:linear-gradient(90deg,var(--blue) calc(var(--prog,0) * 100%),var(--line) 0); }

@media (max-width:860px) {
  .ddm-x .ddm-portal-words span { left:50% !important; right:auto !important; }
  .ddm-x .ddm-portal-words .w1 { top:calc(50% - var(--lh,220px) - 4vh); transform:translate(-50%,calc(-100% - var(--spread,0px))); }
  .ddm-x .ddm-portal-words .w2 { top:calc(50% + var(--lh,220px) + 4vh); transform:translate(-50%,var(--spread,0px)); }
}
@media (max-width:620px) {
  .ddm-x .ddm-portal-chip { gap:7px; font-size:10px; letter-spacing:0; padding:8px 11px; margin-bottom:22px; white-space:nowrap; }
  .ddm-x .ddm-portal-copy h2 { margin-bottom:20px; }
  .ddm-x .ddm-portal-lede { font-size:1rem; margin-bottom:26px; }
  .ddm-x .ddm-portal-copy .ddm-ctas { flex-direction:column; align-self:stretch; }
  .ddm-x .ddm-portal-copy .ddm-btn-xl { min-height:56px; }
  .ddm-x .ddm-portal-copy .ddm-fine { margin-top:16px; font-size:.8rem; }
}

/* ---------- Preferences: lit and still, opaque, no decorative light ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-contour::before { display:none; }
  .ddm-x .ddm-glint.is-glinting { background:none; color:inherit; -webkit-text-fill-color:currentColor; }
  .ddm-x .ddm-sc-screen::before { display:none; }
  .ddm-x .ddm-portal-mark { animation:none !important; color:var(--sun) !important; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x .ddm-contour::before, .ddm-x .ddm-portal-win::before { display:none; }
  .ddm-x :is(.ddm-portal-chip,.ddm-btn-ghost-dark) { -webkit-backdrop-filter:none; backdrop-filter:none; background:#222; }
}
@media (forced-colors:active) {
  .ddm-x .ddm-contour::before, .ddm-x .ddm-portal-win::before, .ddm-x .ddm-portal-win::after, .ddm-x .ddm-sc-screen::before { display:none; }
  .ddm-x .ddm-glint.is-glinting { background:none; color:inherit; -webkit-text-fill-color:currentColor; }
}