/* every strip's colour and photo crop (no inline styles: the live CSP is style-src 'self') */
.dg-t-listen{--c:#79e5b6;--pos:62% 50%;--px:62%;--lift:2.3}
.dg-t-events{--c:#6fb6ff;--pos:50% 38%;--px:50%}
.dg-t-profile{--c:#cbbcff;--pos:45% 35%;--px:45%}
.dg-t-studio{--c:#ff5a64;--pos:40% 18%;--px:40%}
.dg-t-moscow{--c:#e4f222;--pos:70% 40%;--px:70%}
/* DJGO landing — tabs prototype (local only). The sections of the live landing sit behind five hot-cue pads: the pressed pad
   glows in its colour, like on a DJ deck. Colours are the landing's own: mint, blue, pink, lavender, white. */
.dg-deck{margin-top:clamp(28px,5vh,56px);position:relative;z-index:2}
.dg-eyebrow{margin:0 0 16px!important;color:#acb0bf}
.dg-dot{width:6px;height:6px;border-radius:50%;background:#79e5b6;box-shadow:0 0 10px #79e5b6;animation:dg-blink 1.6s ease-in-out infinite}
@keyframes dg-blink{50%{opacity:.3}}

/* v2: slanted photo strips. The row is skewed; every strip clips its photo, the photo is skewed back so it stays upright.
   Resting strip: black-and-white photo, the section colour over it, diagonal hatching, the name written upwards.
   The chosen strip (or the one under the mouse) widens and shows the photo in colour with its name and one line. */
.dg-strips{--skew:-11deg;--r:22px;container-type:inline-size;display:flex;gap:10px;height:clamp(360px,52vh,500px);padding:0 clamp(28px,4vw,56px);transform:skewX(var(--skew))}
/* v3 (Эрик): rounded like the event card next to the globe; hover = a light glow and a little more room, the click opens
   the strip fully (colour photo, a strong glow). The open strip never closes under the mouse. */
.dg-strip{position:relative;flex:1 1 0;min-width:0;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:pointer;color:#fff;font:inherit;text-align:left;background:#0b0d14;isolation:isolate;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent);
  transition:flex-grow .7s cubic-bezier(.22,.9,.24,1),box-shadow .45s ease,translate .45s cubic-bezier(.22,.9,.24,1)}
.dg-strip::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 1px 0 #ffffff1f;background:linear-gradient(180deg,#ffffff0d,transparent 30%)}
.dg-strip:focus-visible{outline:2px solid var(--c);outline-offset:4px}
.dg-strip[aria-selected=true]{flex-grow:4.4;box-shadow:inset 0 0 0 2px var(--c),0 0 70px -16px var(--c),0 30px 60px -30px #000}
.dg-strip:not([aria-selected=true]):hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 70%,transparent),0 0 34px -14px var(--c)}
/* everything inside is skewed back upright */
.dg-s-in,.dg-s-top,.dg-s-h{transform:skewX(calc(var(--skew) * -1))}
/* v5 (Эрик, как у AlphaTheta): the resting name runs along the slanted strip — upright letters, turned with the strip — a bit quieter */
.dg-s-v{transform:translateX(-50%) skewX(calc(var(--skew) * -1)) rotate(calc(180deg + var(--tilt,11deg)))}
/* v94 (Эрик: «дрожание при переходе»): the photo no longer resizes with the strip — it is as wide as an open strip and
   stays put, its focus point (--px) on the strip's centre; the strip just opens a wider window onto it. Same for the open text. */
.dg-s-in{position:absolute;top:0;bottom:0;left:50%;width:88cqw;translate:calc(var(--px,50%) * -1) 0}
.dg-s-in img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);backface-visibility:hidden;filter:grayscale(1) contrast(1.2) brightness(calc(.78 * var(--lift,1)));transform:scale(1.06);transition:filter .7s ease,transform 1.4s cubic-bezier(.22,.9,.24,1)}
.dg-s-in i{position:absolute;inset:0;transition:opacity .55s ease}
.dg-s-tint{background:var(--c);mix-blend-mode:multiply;opacity:.92}
.dg-s-hatch{background:repeating-linear-gradient(-58deg,color-mix(in srgb,var(--c) 85%,#fff) 0 1.6px,transparent 1.6px 7px);mix-blend-mode:screen;opacity:.5}
.dg-s-shade{background:linear-gradient(180deg,#05060c66 0,transparent 22%,transparent 36%,#05060cd9 62%,#05060cf5 100%);opacity:0}
/* hover: lighter, a touch of colour comes through */
.dg-strip:not([aria-selected=true]):hover img{filter:grayscale(.55) contrast(1.15) brightness(calc(.95 * var(--lift,1)));transform:scale(1.02)}
.dg-strip:not([aria-selected=true]):hover .dg-s-tint{opacity:.62}
.dg-strip:not([aria-selected=true]):hover .dg-s-hatch{opacity:.75}
/* open */
.dg-strip[aria-selected=true] img{filter:contrast(1.04);transform:scale(1)}
/* v4 (Эрик: «шум, как на картинке онлайн-студии»): the landing's own .hl-grain-fx (scan lines + live grain) over every photo */
.dg-s-in .hl-grain-fx{z-index:1}
.dg-strip[aria-selected=true] .dg-s-tint,.dg-strip[aria-selected=true] .dg-s-hatch{opacity:0}
.dg-strip[aria-selected=true] .dg-s-shade{opacity:1}
/* the hot-cue letter and LED: keys A–E switch sections */
.dg-s-top{position:absolute;top:16px;left:18px;right:16px;display:flex;align-items:center;gap:8px;z-index:2}
.dg-led{width:8px;height:8px;border-radius:50%;background:#ffffff59;transition:background .3s,box-shadow .3s}
.dg-strip:not([aria-selected=true]):hover .dg-led{background:color-mix(in srgb,var(--c) 70%,#fff);box-shadow:0 0 8px var(--c)}
.dg-strip[aria-selected=true] .dg-led{background:var(--c);box-shadow:0 0 14px var(--c),0 0 3px #fff}
.dg-key{font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#ffffffc0;letter-spacing:.1em;padding:3px 7px;border-radius:999px;background:#05060c66;backdrop-filter:blur(6px)}
.dg-strip[aria-selected=true] .dg-key{color:#05060c;background:var(--c)}
/* the resting name, read upwards */
.dg-s-v{position:absolute;left:50%;bottom:28px;z-index:2;writing-mode:vertical-rl;white-space:nowrap;color:#ffffffd9;transform-origin:50% 50%;font:700 clamp(20px,2.1vw,30px)/1 'Inter Tight',system-ui,sans-serif;letter-spacing:-.02em;text-shadow:0 2px 14px #000a;transition:opacity .3s}
.dg-strip[aria-selected=true] .dg-s-v{opacity:0}
/* the open name */
.dg-s-h{position:absolute;z-index:2;left:clamp(28px,3vw,46px);width:min(30em,calc(50cqw - 90px));bottom:clamp(24px,3vw,36px);display:grid;gap:8px;opacity:0;translate:0 14px;transition:opacity .35s,translate .55s cubic-bezier(.22,.9,.24,1);pointer-events:none}
.dg-s-h>b{font:800 clamp(30px,3.6vw,54px)/.98 'Inter Tight',system-ui,sans-serif;letter-spacing:-.035em;max-width:9em}
.dg-s-h small{font-size:clamp(14px,1.15vw,16.5px);line-height:1.4;color:#e7e9ef;max-width:26em}
.dg-s-h>b::after{content:'';display:block;width:42px;height:3px;margin-top:14px;border-radius:2px;background:var(--c);box-shadow:0 0 12px var(--c)}
.dg-strip[aria-selected=true] .dg-s-h{opacity:1;translate:0 0;transition-delay:.2s}

.dg-stage{position:relative}
.dg-panel{display:none}
.dg-panel.on{display:block;animation:dg-in .5s cubic-bezier(.2,.8,.2,1)}
@keyframes dg-in{from{opacity:0;transform:translateY(14px)}}
/* the landing reveals sections on scroll; inside a fresh tab everything is already in view */
.dg-panel.on .reveal{opacity:1!important;transform:none!important}
.dg-panel>section:first-child{margin-top:clamp(8px,2vh,24px)!important;padding-top:clamp(24px,4vh,48px)!important}

/* the artist page: the desktop page with the phone on top of it */
.dg-pf-shots{position:relative}
.hl-ms-main>.hl-grain>img.dg-pf-phone{position:absolute;right:4%;bottom:-6%;width:24%;height:auto;border-radius:22px;border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 70px -20px #000,0 0 0 6px #0b0d14;z-index:2}
.dg-profile .hl-get{z-index:3}

.dg-proto{position:fixed;right:12px;bottom:12px;z-index:60;padding:6px 10px;border-radius:8px;background:rgba(203,188,255,.12);border:1px solid rgba(203,188,255,.4);color:#cbbcff;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.08em;pointer-events:none}

@media(max-width:900px){
  .dg-strips{--skew:-7deg;--r:16px;gap:6px;height:400px;padding:0 18px}
  .dg-strip[aria-selected=true]{flex-grow:5}
  .dg-s-v{font-size:19px;bottom:18px}
  .dg-s-top{top:10px;left:10px}
  .dg-strip:not([aria-selected=true]) .dg-key{display:none}
  .hl-ms-main>.hl-grain>img.dg-pf-phone{width:30%;right:3%;bottom:-4%}
}
@media(max-width:560px){
  .dg-strips{height:380px;padding:0 12px;gap:4px}
  .dg-strips{--r:14px}
  .dg-strips .dg-strip[aria-selected=true]{flex-grow:6}
  .dg-s-h{left:20px;width:calc(60cqw - 40px);bottom:20px}
  .dg-s-h b{font-size:30px}
  .dg-s-h small{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){.dg-dot,.dg-panel.on{animation:none}.dg-strip,.dg-s-in img,.dg-s-in i,.dg-s-h,.dg-s-v{transition:none}}
/* phone: the visitor is on a phone, so show the phone page itself, whole, instead of the desktop shot with an overlay */
@media(max-width:700px){
  .hl-ms-main>.hl-grain>img.dg-pf-desk{display:none}
  .hl-ms-main>.hl-grain>img.dg-pf-phone{position:relative;display:block;right:auto;bottom:auto;width:72%;margin:18px auto 4px;box-shadow:0 30px 60px -24px #000,0 0 0 5px #0b0d14}
}
/* v3: a small tool button on the open card (the listening strip: «Распознать трек») */
.dg-s-tool{display:inline-flex;align-items:center;gap:9px;justify-self:start;margin-top:6px;padding:7px 14px 7px 8px;border-radius:999px;background:#05060ccc;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);backdrop-filter:blur(10px);box-shadow:0 0 24px -8px var(--c)}
.dg-s-tool i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#05060c}
.dg-s-tool svg{width:16px;height:16px;animation:dg-eq 1.4s ease-in-out infinite}
.dg-s-tool b{white-space:nowrap;font:700 14px 'Inter Tight',system-ui,sans-serif;letter-spacing:-.01em}
.dg-s-tool em{font:500 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:color-mix(in srgb,var(--c) 80%,#fff)}
@keyframes dg-eq{50%{transform:scaleY(.72)}}
/* the studio's killer feature: the reel is made by itself — the frame pulses like a recording */
.dg-s-reel svg{animation:dg-rec 1.8s ease-in-out infinite}
@keyframes dg-rec{50%{transform:scale(.88)}}
@media(max-width:560px){.dg-s-tool{padding:6px 11px 6px 6px;gap:7px}.dg-s-tool b{font-size:12.5px}.dg-s-tool em{display:none}.dg-s-tool i{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.dg-s-tool svg,.dg-s-reel svg{animation:none}}
/* v5 (Эрик, телефон): the globe faded below its own box and was cut by a straight line under «Твой звук соединяет людей» —
   it fades out inside the box now; less empty room between the hero and the strips */
@media(max-width:700px){
  .hero .world canvas{-webkit-mask-image:radial-gradient(115% 80% at 50% 40%,#000 58%,transparent 82%);mask-image:radial-gradient(115% 80% at 50% 40%,#000 58%,transparent 82%)}
  .hero .world::after{display:none} /* its rectangle (a shade of its own) showed as a box around the globe */
  /* «Телефон вместо камеры»: the flying phone stays inside its picture and never covers the title */
  .hl-b-viz .hl-phone{width:auto;height:146px;bottom:10px;left:calc(50% - 39px)}
  .dg-deck{margin-top:22px}
  .dg-eyebrow{margin-bottom:12px!important}
}