/* Deft Digital Media — Social media content page, hero and scroll story (v2, chosen by Daniel, October 24, 2026: "a more polished incarnation"
   of the hero and the scroll section). Loads after styles/service-social.css and reuses its post, HUD, roll, caption,
   feed and ping pieces; prefix ddm-so2-. Hero: one anchor, a phone playing our own shoot-day reel, two job posts tucked
   behind it and three glass notes, dealt out of one stack on load, then a soft pointer tilt (--px, --py). Scroll section:
   the beats scroll beside a Sunflower line while the frame stays pinned; scripts/service-social-motion.js writes --p (whole story),
   --e (the color edit), --m (the fold into a phone) and --r (the report). Sunflower stays the only brand color. */

/* ---------- Hero ---------- */
.ddm-x .ddm-so2-hero-vis { position:relative; --px:0; --py:0; }
.ddm-x .ddm-so2-scene { position:relative; height:clamp(460px,42vw,620px); }
.ddm-x .ddm-so2-phone { --w:min(272px,21vw); position:absolute; z-index:2; left:50%; top:50%; width:var(--w); aspect-ratio:9 / 19; translate:-50% -50%; padding:9px; border-radius:44px; background:#0d0d0e;
  box-shadow:0 60px 100px -40px rgb(0 0 0/.6), inset 0 0 0 1px rgb(255 255 255/.14), 0 0 0 1px rgb(17 17 17/.08);
  transform:translate(calc(var(--px) * 6px),calc(var(--py) * 6px)) rotate(calc(var(--px) * .6deg)); transition:transform .5s var(--ease);
  animation:ddm-so2-rise 1s var(--ease) .2s both; }
.ddm-x .ddm-so2-phone > video { position:absolute; inset:9px; width:calc(100% - 18px); height:calc(100% - 18px); object-fit:cover; border-radius:35px; background:#222; }
.ddm-x .ddm-so2-phone::after { content:""; position:absolute; inset:9px; border-radius:35px; pointer-events:none;
  background:linear-gradient(180deg,rgb(0 0 0/.42),transparent 18%,transparent 58%,rgb(0 0 0/.62)); }
.ddm-x .ddm-so2-notch { position:absolute; z-index:3; top:17px; left:50%; width:30%; height:20px; translate:-50% 0; border-radius:12px; background:#0d0d0e; }
.ddm-x .ddm-so2-reel-top { position:absolute; z-index:3; left:24px; right:24px; top:48px; display:flex; align-items:center; color:#fff; font-size:.86rem; }
.ddm-x .ddm-so2-reel-top b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-so2-reel-top i { margin-left:auto; width:18px; height:14px; border-radius:4px; box-shadow:inset 0 0 0 1.8px #fff; }
.ddm-x .ddm-so2-rail { position:absolute; z-index:3; right:20px; bottom:96px; display:grid; gap:16px; }
.ddm-x .ddm-so2-rail svg { width:24px; height:24px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 2px 4px rgb(0 0 0/.4)); }
.ddm-x .ddm-so2-rail svg.is-liked { fill:var(--sun); stroke:var(--sun); animation:ddm-so-pop .6s var(--ease) 2.2s both; }
.ddm-x .ddm-so2-reel-foot { position:absolute; z-index:3; left:20px; right:58px; bottom:26px; display:grid; gap:8px; color:#fff; }
.ddm-x .ddm-so2-reel-foot .ddm-so-post-head { padding:0; font-size:.78rem; }
.ddm-x .ddm-so2-reel-foot em { font-style:normal; font-weight:600; font-size:.7rem; padding:4px 10px; border-radius:8px; box-shadow:inset 0 0 0 1.4px rgb(255 255 255/.8); }
.ddm-x .ddm-so2-reel-foot small { font-size:.72rem; line-height:1.35; color:rgb(255 255 255/.92); }
.ddm-x .ddm-so2-bar { display:block; height:2px; margin-right:-38px; border-radius:2px; background:rgb(255 255 255/.3); overflow:hidden; }
.ddm-x .ddm-so2-bar i { display:block; height:100%; width:100%; background:#fff; transform-origin:0 50%; animation:ddm-so2-bar 4.6s linear 1.2s both; }
@keyframes ddm-so2-bar { from { transform:scaleX(0); } }
.ddm-x .ddm-so2-flash { position:absolute; z-index:4; inset:9px; border-radius:35px; background:#fff; opacity:0; pointer-events:none; animation:ddm-so-flash .7s ease-out 1s both; }
@keyframes ddm-so2-rise { from { opacity:0; translate:-50% calc(-50% + 40px); } }

.ddm-x .ddm-so2-card { --w:min(222px,17vw); position:absolute; z-index:1; width:var(--w); margin:0; padding:9px 9px 7px; border-radius:22px; background:rgb(255 255 255/.84);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.06), 0 40px 70px -40px rgb(0 0 0/.5);
  transition:transform .6s var(--ease); animation:ddm-so2-deal 1.1s cubic-bezier(.3,1.3,.5,1) .55s both; }
.ddm-x .ddm-so2-card img { display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:14px; }
.ddm-x .ddm-so2-card .ddm-so-post-head { font-size:.72rem; padding-bottom:8px; }
.ddm-x .ddm-so2-card .ddm-so-post-acts svg { width:18px; height:18px; }
.ddm-x .ddm-so2-card.c1 { left:3%; top:19%; rotate:-10deg; --from:calc(var(--w) * .9) 0; transform:translate(calc(var(--px) * 16px),calc(var(--py) * 12px)); }
.ddm-x .ddm-so2-card.c2 { right:3%; top:13%; rotate:9deg; --from:calc(var(--w) * -.9) 0; transform:translate(calc(var(--px) * 14px),calc(var(--py) * 14px)); }
@keyframes ddm-so2-deal { from { opacity:0; translate:var(--from); rotate:0deg; scale:.9; } }

.ddm-x .ddm-so2-chip { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; margin:0; padding:10px 14px 10px 10px; border-radius:16px; background:rgb(255 255 255/.8);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.07), 0 22px 40px -24px rgb(0 0 0/.45);
  font-size:.78rem; line-height:1.25; white-space:nowrap; transform:translate(calc(var(--px) * 24px),calc(var(--py) * 20px)); transition:transform .5s var(--ease);
  animation:ddm-so2-pop .7s var(--ease) both; animation-delay:var(--d,1.2s); }
.ddm-x .ddm-so2-chip svg { flex:none; width:30px; height:30px; padding:7px; border-radius:50%; background:var(--sun); fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.ddm-x .ddm-so2-chip span:not(.ddm-so-rec) { display:grid; }
.ddm-x .ddm-so2-chip b { font-weight:600; }
.ddm-x .ddm-so2-chip small { color:var(--ink-3); font-size:.72rem; }
.ddm-x .ddm-so2-chip .ddm-so-rec { display:inline-flex; }
.ddm-x .ddm-so2-chip.k1 { left:8%; top:3%; padding-left:8px; font-weight:600; --d:1.05s; }
.ddm-x .ddm-so2-chip.k2 { right:-1%; top:57%; --d:1.55s; }
.ddm-x .ddm-so2-chip.k3 { left:-7%; bottom:9%; --d:2.4s; }
.ddm-x .ddm-so2-chip.k3 svg { fill:var(--ink); stroke:none; }
@keyframes ddm-so2-pop { from { opacity:0; scale:.7; translate:0 10px; } }
.ddm-x .ddm-so2-cap { text-align:center; margin-top:10px; }

/* ---------- Why social: the beats scroll past like the other service pages (Daniel, Oct 24: scroll in and out, not a crossfade);
   the stage stays pinned beside them and follows the beat at the middle of the screen ---------- */
.ddm-x .ddm-so2-why { padding-top:clamp(64px,8vw,120px); }
.ddm-x .ddm-so2-why .ddm-so-why-head { margin-bottom:clamp(24px,4vw,48px); }
.ddm-x .ddm-so2-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); }

/* The copy: the same beats and Sunflower line as Websites */
.ddm-x .ddm-so2-beats { margin:0; padding:0 0 30vh; list-style:none; }
.ddm-x .ddm-so2-beat { min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding-left:22px; border-left:2px solid var(--line); transition:border-color .4s var(--ease); }
.ddm-x .ddm-so2-beat h3 { font-size:clamp(1.6rem,2.6vw,2.3rem); margin-bottom:12px; transition:color .4s var(--ease); }
.ddm-x .ddm-so2-beat p { max-width:38ch; font-size:1.08rem; color:var(--ink-2); margin:0; transition:color .4s var(--ease); }
.ddm-x .ddm-so2-why.is-live .ddm-so2-beat:not(.is-on) :is(h3,p) { color:var(--ink-3); }
.ddm-x .ddm-so2-beat.is-on { border-left-color:var(--sun); }

/* The stage: the camera frame folds into a phone as --m runs 0 to 1 */
.ddm-x .ddm-so2-stage-col { position:sticky; top:calc(var(--nav-h) + 4vh); align-self:start; display:flex; align-items:center; justify-content:center; height:calc(100vh - var(--nav-h) - 8vh); }
.ddm-x .ddm-so2-stage { --cw:min(560px,40vw); --pw:min(290px,24vw); --m:0; --e:0; --r:0; position:relative; z-index:1;
  width:calc(var(--cw) + (var(--pw) - var(--cw)) * var(--m)); height:calc(var(--cw) * .6667 + (var(--pw) * 2.05 - var(--cw) * .6667) * var(--m));
  border-radius:calc(24px + 18px * var(--m)); background:#0d0d0e; box-shadow:0 50px 90px -40px rgb(0 0 0/.6), inset 0 0 0 1px rgb(255 255 255/.12), 0 0 0 1px rgb(17 17 17/.08); }
.ddm-x .ddm-so2-cam { position:absolute; inset:8px; border-radius:calc(17px + 16px * var(--m)); overflow:hidden; background:#111; opacity:clamp(0,calc(1 - var(--m) * 1.6),1); }
.ddm-x .ddm-so2-shot { position:absolute; inset:-3%; }
.ddm-x .ddm-so2-stage[data-beat="0"] .ddm-so2-shot, .ddm-x .ddm-so2-stage[data-beat="1"] .ddm-so2-shot { animation:ddm-so2-sway 7s ease-in-out infinite alternate; }
@keyframes ddm-so2-sway { 0% { transform:translate(0,0) rotate(0deg); } 33% { transform:translate(-.6%,.4%) rotate(-.25deg); } 66% { transform:translate(.5%,-.3%) rotate(.2deg); } 100% { transform:translate(-.2%,.5%) rotate(-.1deg); } }
.ddm-x .ddm-so2-shot > * { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s var(--ease); }
.ddm-x .ddm-so2-stage[data-beat="0"] .v0, .ddm-x .ddm-so2-stage[data-beat="1"] .v1 { opacity:1; }
.ddm-x .ddm-so2-stage:not([data-beat="0"]):not([data-beat="1"]) :is(.raw,.graded) { opacity:1; }
.ddm-x .ddm-so2-shot .raw { filter:saturate(.3) contrast(.84) brightness(.9); }
.ddm-x .ddm-so2-shot .graded { filter:saturate(1.15) contrast(1.05); clip-path:inset(0 calc((1 - var(--e)) * 100%) 0 0); }
.ddm-x .ddm-so2-wipe { left:calc(var(--e) * 100%) !important; width:2px !important; margin-left:-1px; background:#fff; box-shadow:0 0 14px rgb(255 255 255/.9); }
.ddm-x .ddm-so2-stage[data-beat="2"] .ddm-so2-wipe { opacity:calc(1 - var(--e) * var(--e)); }
.ddm-x .ddm-so2-stage:not([data-beat="0"]) .ddm-so-focus i { border-color:var(--sun); }
.ddm-x .ddm-so2-stage[data-beat="0"] .ddm-so-focus { animation:ddm-so-focus .9s var(--ease) .3s both; }
.ddm-x .ddm-so2-stage[data-beat="0"] .ddm-so-focus i { animation:ddm-so-lock .3s ease 1s both; }
.ddm-x .ddm-so2-stage:not([data-beat="0"]):not([data-beat="1"]) :is(.ddm-so-hud-rec,.ddm-so-hud-spec,.ddm-so-thirds,.ddm-so-focus,.ddm-so-roll) { opacity:0; }
.ddm-x .ddm-so2-stage[data-beat="1"] .ddm-so-flash { animation:ddm-so-flash .6s ease-out .25s both; }
.ddm-x .ddm-so2-stage[data-beat="1"] .ddm-so-roll li { animation:ddm-so-land .6s var(--ease) both; animation-delay:calc(.45s + var(--k,0) * 380ms); }
.ddm-x .ddm-so2-stage:not([data-beat="0"]):not([data-beat="1"]) .ddm-so-roll li { opacity:1; }
.ddm-x .ddm-so2-crop { position:absolute; top:12%; bottom:20%; left:50%; aspect-ratio:4 / 5; translate:-50% 0; border:1.5px solid #fff; border-radius:6px; box-shadow:0 0 0 999px rgb(0 0 0/.5);
  opacity:clamp(0,calc(var(--e) * 3 - 1.6),1); }
.ddm-x .ddm-so2-stage[data-beat="2"] .ddm-so-edit { opacity:1; translate:0 0; }
.ddm-x .ddm-so2-stage[data-beat="2"] .ddm-so-caption { opacity:clamp(0,calc(var(--e) * 4 - 2.8),1); transition:none; }

.ddm-x .ddm-so2-feed { position:absolute; inset:10px; border-radius:33px; overflow:hidden; background:#fff; opacity:clamp(0,calc(var(--m) * 2.2 - 1.2),1); visibility:hidden; }
.ddm-x .ddm-so2-stage:is([data-beat="3"],[data-beat="4"],[data-beat="5"]) .ddm-so2-feed { visibility:visible; }
.ddm-x .ddm-so2-feed-list { padding:10px 10px 0; display:grid; gap:12px; transform:translateY(calc((1 - var(--m)) * -30%)); }
.ddm-x .ddm-so2-stage[data-beat="4"] .ddm-so-like, .ddm-x .ddm-so2-stage[data-beat="5"] .ddm-so-like { fill:var(--sun); animation:ddm-so-pop .6s var(--ease) .3s both; }
.ddm-x .ddm-so2-stage[data-beat="4"] .ddm-so-ping { opacity:1; translate:0 0; transition:opacity .5s var(--ease), translate .6s var(--ease); transition-delay:calc(.25s + var(--k,0) * 500ms); }
/* 5: the monthly report rises over the feed with the scroll */
.ddm-x .ddm-so2-report { position:absolute; left:8px; right:8px; bottom:8px; padding:16px 14px 14px; border-radius:22px; background:rgb(255 255 255/.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgb(17 17 17/.07), 0 -20px 40px -20px rgb(0 0 0/.35); transform:translateY(calc((1 - var(--r)) * 115%)); }
.ddm-x .ddm-so2-report-top { display:flex; align-items:baseline; margin:0 0 12px; font-size:.82rem; }
.ddm-x .ddm-so2-report-top b { font-weight:600; }
.ddm-x .ddm-so2-report-top small { margin-left:auto; font:500 .6rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-so2-report ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.ddm-x .ddm-so2-report li { display:grid; gap:5px; font-size:.66rem; color:var(--ink-2); }
.ddm-x .ddm-so2-report li i { display:block; height:7px; border-radius:6px; background:rgb(17 17 17/.07); position:relative; overflow:hidden; }
.ddm-x .ddm-so2-report li i::after { content:""; position:absolute; inset:0; border-radius:6px; background:var(--sun); transform-origin:0 50%; transform:scaleX(calc(var(--w) * clamp(0,calc(var(--r) * 1.6 - .4),1))); }
.ddm-x .ddm-so2-report-next { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); font-size:.66rem; color:var(--ink-2); }
.ddm-x .ddm-so2-report-next b { color:var(--ink); font-weight:600; margin-right:6px; }

/* ---------- Phones and tablets ---------- */
@media (max-width:960px) {
  .ddm-x .ddm-so2-phone { --w:min(250px,30vw); }
  .ddm-x .ddm-so2-card { --w:min(200px,24vw); }
  .ddm-x .ddm-so2-scene { height:clamp(440px,64vw,560px); }
  .ddm-x .ddm-so2-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
  .ddm-x .ddm-so2-stage { --cw:min(440px,44vw); --pw:min(240px,30vw); }
}
@media (max-width:640px) {
  .ddm-x .ddm-so2-scene { height:clamp(400px,112vw,470px); }
  .ddm-x .ddm-so2-phone { --w:min(200px,52vw); border-radius:34px; padding:7px; }
  .ddm-x .ddm-so2-phone > video, .ddm-x .ddm-so2-phone::after, .ddm-x .ddm-so2-flash { inset:7px; border-radius:27px; }
  .ddm-x .ddm-so2-phone > video { width:calc(100% - 14px); height:calc(100% - 14px); }
  .ddm-x .ddm-so2-reel-top { top:38px; left:18px; right:18px; font-size:.74rem; }
  .ddm-x .ddm-so2-rail { right:14px; bottom:80px; gap:12px; } .ddm-x .ddm-so2-rail svg { width:19px; height:19px; }
  .ddm-x .ddm-so2-reel-foot { left:15px; right:44px; bottom:18px; } .ddm-x .ddm-so2-reel-foot small { font-size:.62rem; }
  .ddm-x .ddm-so2-card { --w:min(150px,38vw); padding:6px 6px 5px; border-radius:16px; }
  .ddm-x .ddm-so2-card .ddm-so-post-head { font-size:.6rem; padding-bottom:6px; } .ddm-x .ddm-so2-card .ddm-so-post-head > i { width:18px; height:18px; }
  .ddm-x .ddm-so2-card.c1 { left:-2%; top:24%; } .ddm-x .ddm-so2-card.c2 { right:-2%; top:16%; }
  .ddm-x .ddm-so2-chip { font-size:.66rem; padding:7px 10px 7px 7px; gap:7px; border-radius:13px; } .ddm-x .ddm-so2-chip svg { width:24px; height:24px; padding:5px; }
  .ddm-x .ddm-so2-chip small { font-size:.6rem; }
  .ddm-x .ddm-so2-chip.k1 { left:2%; top:2%; } .ddm-x .ddm-so2-chip.k2 { right:-2%; top:62%; } .ddm-x .ddm-so2-chip.k3 { left:-2%; bottom:4%; }
  /* Story: the frame on top, the copy under it */
  .ddm-x .ddm-so2-grid { grid-template-columns:1fr; gap:0; }
  .ddm-x .ddm-so2-stage-col { order:-1; z-index:2; top:var(--nav-h); height:330px; background:linear-gradient(var(--canvas) 88%,transparent); }
  .ddm-x .ddm-so2-stage { --cw:min(340px,calc(100vw - 40px)); --pw:150px; }
  .ddm-x .ddm-so2-feed { zoom:.56; inset:calc(8px / .56); border-radius:calc(22px / .56); }
  .ddm-x .ddm-so2-beats { padding-bottom:20svh; }
  .ddm-x .ddm-so2-beat { min-height:44svh; padding-left:16px; }
  .ddm-x .ddm-so2-beat h3 { font-size:1.45rem; margin-bottom:10px; }
  .ddm-x .ddm-so2-beat p { font-size:1rem; }
}

/* ---------- Reduced motion, reduced transparency ---------- */
@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-so2-phone, .ddm-x .ddm-so2-card, .ddm-x .ddm-so2-chip { transform:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x :is(.ddm-so2-card,.ddm-so2-chip,.ddm-so2-report) { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
}