/* ============================================================
   IMMERSE — section-specific motion, depth and modern CSS details
   Each chapter gets its own rhythm and colour, all tied to the
   abyss / biolum / gold palette.
   ============================================================ */

@property --ia-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}

:where(.hero-title, .chap-title, .contact .chap-title){
  text-wrap:balance;
}

html{
  scrollbar-color:rgba(85,227,200,.36) rgba(4,8,14,.92);
  scrollbar-width:thin;
}

/* ---------- shared: live gold on italic serif ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title em,
  .chap-title em{
    background-image:linear-gradient(100deg, var(--gold-2) 0%, #fff4c9 26%, var(--gold) 52%, var(--gold-2) 76%, #fff4c9 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .hero-title em{
    animation:lineUp 1.1s var(--e-out) .86s forwards, goldFlow 11s ease-in-out 2s infinite alternate;
  }
  .chap-title em{
    animation:goldFlow 11s ease-in-out infinite alternate;
  }
}

@keyframes goldFlow{
  from{ background-position:0% 50%; }
  to  { background-position:100% 50%; }
}

/* ============================================================
   I. HERO — aurora + cursor light
   ============================================================ */
.hero::before{
  content:"";
  position:absolute;
  inset:-15%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(32% 30% at 20% 28%, rgba(85,227,200,.16), transparent 70%),
    radial-gradient(28% 26% at 80% 18%, rgba(212,175,55,.12), transparent 70%),
    conic-gradient(from var(--ia-angle) at 58% 42%,
      rgba(85,227,200,.055),
      rgba(45,95,190,.045),
      rgba(212,175,55,.05),
      rgba(85,227,200,.055));
  filter:blur(30px);
  opacity:.9;
  animation:auroraSpin 30s linear infinite;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(320px circle at var(--hx,62%) var(--hy,38%), rgba(170,255,235,.12), transparent 62%);
  mix-blend-mode:screen;
}
@keyframes auroraSpin{ to{ --ia-angle:360deg; } }

/* ============================================================
   II. MANIFEST — reflection lines + living glass card
   ============================================================ */
#manifest::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    transparent 0 46px,
    rgba(85,227,200,.05) 47px,
    transparent 48px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  animation:reflectDrift 24s linear infinite;
}
@keyframes reflectDrift{ to{ background-position:0 96px; } }

#manifest .aside-card{
  isolation:isolate;
}
#manifest .aside-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--ia-angle),
    transparent 0 235deg,
    rgba(85,227,200,.55) 280deg,
    rgba(212,175,55,.45) 315deg,
    transparent 350deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.7;
  pointer-events:none;
  animation:borderSpin 9s linear infinite;
}
#manifest .aside-glow{
  animation:asidePulse 8s ease-in-out infinite alternate;
}
@keyframes asidePulse{
  from{ opacity:.55; transform:scale(.92); }
  to  { opacity:1; transform:scale(1.12); }
}
@keyframes borderSpin{ to{ --ia-angle:360deg; } }

/* ============================================================
   III. SERVICES — six layers, six colours
   ============================================================ */
#services::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0 calc(16.666% - 1px),
    rgba(85,227,200,.035) calc(16.666% - 1px) 16.666%);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.serv{
  --accent:rgba(85,227,200,.6);
  isolation:isolate;
}
.serv:nth-child(2){ --accent:rgba(212,175,55,.66); }
.serv:nth-child(3){ --accent:rgba(106,200,255,.6); }
.serv:nth-child(4){ --accent:rgba(242,114,111,.58); }
.serv:nth-child(5){ --accent:rgba(167,139,250,.6); }
.serv:nth-child(6){ --accent:rgba(85,227,200,.6); }

.serv::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--ia-angle),
    transparent 0 225deg,
    var(--accent) 285deg,
    transparent 330deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .45s;
  pointer-events:none;
}
.serv:hover::after{
  opacity:.95;
  animation:borderSpin 12s linear infinite;
}
.serv:hover{
  border-color:var(--accent);
}
.serv:hover .serv-idx{
  color:var(--accent);
}
.serv h3::after{
  content:"";
  display:block;
  width:28px;
  height:1px;
  margin-top:10px;
  background:linear-gradient(90deg, var(--accent), transparent);
  transform:scaleX(.35);
  transform-origin:left;
  transition:transform .55s var(--e-out);
}
.serv:hover h3::after{
  transform:scaleX(1);
}

/* ============================================================
   IV. CREOVIBE — AI aurora, sheen and live equalizer
   ============================================================ */
#creovibe::after{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  right:-20vmax;
  width:62vmax;
  height:62vmax;
  border-radius:50%;
  background:conic-gradient(from var(--ia-angle),
    rgba(85,227,200,.16),
    rgba(70,105,230,.12),
    rgba(212,175,55,.09),
    rgba(85,227,200,.16));
  filter:blur(70px);
  opacity:.6;
  pointer-events:none;
  animation:auroraSpin 36s linear infinite;
}
.product-shot::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 34%, rgba(220,255,250,.09) 50%, transparent 66%);
  transform:translateX(-130%);
  animation:shotSheen 8.5s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes shotSheen{
  0%, 58%{ transform:translateX(-130%); }
  82%, 100%{ transform:translateX(130%); }
}

.pv-eq{
  margin-left:auto;
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  height:14px;
  flex:0 0 auto;
}
.pv-eq i{
  display:block;
  width:2px;
  height:4px;
  border-radius:2px;
  background:var(--biolum);
  opacity:.65;
  box-shadow:0 0 7px rgba(85,227,200,.55);
  animation:pvEq 1.45s ease-in-out infinite;
}
.pv-eq i:nth-child(2){ animation-delay:.14s; }
.pv-eq i:nth-child(3){ animation-delay:.28s; }
.pv-eq i:nth-child(4){ animation-delay:.42s; }
.pv-eq i:nth-child(5){ animation-delay:.56s; }
@keyframes pvEq{
  0%, 100%{ height:3px; opacity:.35; }
  50%     { height:14px; opacity:1; }
}

.pmode{
  --pmode-accent:rgba(85,227,200,.5);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.pmode:nth-child(2){ --pmode-accent:rgba(106,200,255,.52); }
.pmode:nth-child(3){ --pmode-accent:rgba(212,175,55,.55); }
.pmode:nth-child(4){ --pmode-accent:rgba(167,139,250,.52); }
.pmode::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), var(--pmode-accent), transparent 66%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.pmode:hover::before{ opacity:.17; }
.pmode > *{ position:relative; z-index:1; }
.pmode::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--ia-angle), transparent 0 240deg, var(--pmode-accent) 300deg, transparent 345deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
  z-index:2;
}
.pmode:hover::after{
  opacity:.9;
  animation:borderSpin 5s linear infinite;
}

/* ============================================================
   V. QUIZ — sonar rings + liquid progress
   ============================================================ */
.quiz{
  isolation:isolate;
}
.quiz::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:0;
  width:132%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    transparent 54%,
    rgba(85,227,200,.09) 55%,
    transparent 56%,
    transparent 66%,
    rgba(212,175,55,.055) 67%,
    transparent 68%);
  animation:sonarPulse 7s ease-out infinite;
  pointer-events:none;
}
.quiz > *{ position:relative; z-index:1; }
@keyframes sonarPulse{
  0%  { transform:translate(-50%,-50%) scale(.84); opacity:.85; }
  70% { opacity:.18; }
  100%{ transform:translate(-50%,-50%) scale(1.1); opacity:0; }
}
.quiz-track span{
  background-size:200% 100%;
  animation:barFlow 6s linear infinite;
}
@keyframes barFlow{ to{ background-position:-200% 0; } }
.quiz-opts button{
  position:relative;
  overflow:hidden;
}
.quiz-opts button::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 36%, rgba(85,227,200,.13) 50%, transparent 64%);
  transform:translateX(-120%);
  transition:transform .75s var(--e-out);
  pointer-events:none;
}
.quiz-opts button:hover::after{ transform:translateX(120%); }

/* ============================================================
   VI. CASES — unique accent per case + cursor light
   ============================================================ */
.case{
  --case-accent:rgba(85,227,200,.58);
  isolation:isolate;
}
.case:nth-child(3n+2){ --case-accent:rgba(212,175,55,.62); }
.case:nth-child(3n){ --case-accent:rgba(106,200,255,.55); }
.case:nth-child(4n+4){ --case-accent:rgba(242,114,111,.52); }
.case:nth-child(5n+5){ --case-accent:rgba(167,139,250,.55); }
.case:hover{
  border-color:var(--case-accent);
}
.case::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--ia-angle), transparent 0 230deg, var(--case-accent) 290deg, transparent 340deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s;
  pointer-events:none;
}
.case:hover::after{
  opacity:.9;
  animation:borderSpin 5s linear infinite;
}
.case-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(230,255,250,.14), transparent 62%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.case:hover .case-media::before{ opacity:1; }
.case-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform:translateX(-125%);
  transition:transform .95s var(--e-out);
  pointer-events:none;
}
.case:hover .case-media::after{ transform:translateX(125%); }
.case.in .case-metric::after,
.case:hover .case-metric::after{
  background:linear-gradient(90deg, var(--case-accent), transparent);
}

/* ============================================================
   VII. PROCESS — scroll progress line through the five steps
   ============================================================ */
#process .steps{
  position:relative;
  --steps-progress:0;
}
#process .steps::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  z-index:2;
  height:1px;
  width:calc(var(--steps-progress) * 100%);
  background:linear-gradient(90deg, var(--biolum), var(--gold));
  box-shadow:0 0 14px rgba(85,227,200,.55);
  pointer-events:none;
  transition:width .16s linear;
}
#process .steps::after{
  content:"";
  position:absolute;
  top:-4px;
  left:calc(var(--steps-progress) * 100%);
  z-index:3;
  width:7px;
  height:7px;
  margin-left:-3.5px;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 18px var(--biolum);
  pointer-events:none;
  transition:left .16s linear;
}
.step-i::after{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-left:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px var(--gold);
  opacity:.65;
  animation:stepDot 5s ease-in-out infinite;
}
.step:nth-child(2n) .step-i{ color:var(--biolum); }
.step:nth-child(2n) .step-i::after{ background:var(--biolum); box-shadow:0 0 10px var(--biolum); }
@keyframes stepDot{
  0%, 100%{ transform:scale(.7); opacity:.4; }
  50%     { transform:scale(1.25); opacity:1; }
}

/* ============================================================
   VIII. ARTIFACT — dust and a warm aura around the letter
   ============================================================ */
#artifact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 18% 26%, rgba(85,227,200,.75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 18%, rgba(212,175,55,.65) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 44% 74%, rgba(85,227,200,.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 62%, rgba(212,175,55,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 26% 86%, rgba(150,220,255,.55) 0 1px, transparent 1.6px);
  background-size:420px 420px, 520px 520px, 460px 460px, 600px 600px, 380px 380px;
  opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 45%, #000 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 70% at 60% 45%, #000 0%, transparent 78%);
  animation:dustFloat 22s linear infinite;
}
@keyframes dustFloat{ to{ background-position:0 -420px, 60px -520px, -40px -460px, 30px -600px, -20px -380px; } }
.letter::before{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:0;
  border-radius:30%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(212,175,55,.14), transparent 70%);
  filter:blur(22px);
  pointer-events:none;
  animation:letterAura 7s ease-in-out infinite alternate;
}
@keyframes letterAura{
  from{ opacity:.5; transform:scale(.96); }
  to  { opacity:1; transform:scale(1.04); }
}

/* ============================================================
   IX. CONTACT — sonar, live form response
   ============================================================ */
#contact::after{
  content:"";
  position:absolute;
  right:-12%;
  bottom:-28%;
  z-index:0;
  width:72vmin;
  height:72vmin;
  border-radius:50%;
  background:radial-gradient(circle,
    transparent 54%,
    rgba(85,227,200,.075) 55%,
    transparent 56%,
    transparent 64%,
    rgba(212,175,55,.055) 65%,
    transparent 66%);
  animation:contactSonar 9s ease-out infinite;
  pointer-events:none;
}
@keyframes contactSonar{
  0%  { transform:scale(.82); opacity:.9; }
  72% { opacity:.12; }
  100%{ transform:scale(1.12); opacity:0; }
}
.form:has(:focus){
  border-color:rgba(85,227,200,.4);
  box-shadow:0 0 0 1px rgba(85,227,200,.08), 0 40px 90px -50px rgba(85,227,200,.28);
}
.field:has(:focus) > span{ color:var(--biolum); }
.contact-depth{
  animation:depthBreathe 7s ease-in-out infinite alternate;
}
@keyframes depthBreathe{
  from{ opacity:.45; transform:scale(1); }
  to  { opacity:.78; transform:scale(1.02); }
}

/* ============================================================
   X. FOOTER — closing wave
   ============================================================ */
.foot::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--biolum), var(--gold), transparent);
  background-size:200% 100%;
  animation:footerFlow 9s linear infinite;
  pointer-events:none;
}
@keyframes footerFlow{ to{ background-position:-200% 0; } }
.foot-mark{
  animation:markGlow 6s ease-in-out infinite alternate;
}
@keyframes markGlow{
  from{ filter:drop-shadow(0 0 4px rgba(212,175,55,.2)); }
  to  { filter:drop-shadow(0 0 14px rgba(212,175,55,.55)); }
}

/* click sonar */
.sonar-click{
  position:fixed;
  z-index:9998;
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  border:1px solid rgba(85,227,200,.8);
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  animation:sonarClick 1.1s var(--e-out) forwards;
}
@keyframes sonarClick{
  from{ transform:scale(.4); opacity:.9; }
  to  { transform:scale(18); opacity:0; }
}

/* ============================================================
   CREOVIBE.PROдвиж — SMM-панель (вторая собственная разработка)
   ============================================================ */
.product-sub{
  margin-top:clamp(44px, 6vw, 76px);
  padding-top:clamp(36px, 5vw, 60px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
}
.ps-shot{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--abyss-2);
  box-shadow:0 40px 90px -50px rgba(85,227,200,.35);
}
.ps-shot .ps-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.ps-shot img{
  display:block;
  width:100%;
  aspect-ratio:1200/844;
  object-fit:cover;
  object-position:top center;
  filter:grayscale(.35) brightness(.8) contrast(1.05);
  transition:filter .7s var(--e-soft), transform 1s var(--e-out);
  transform:scale(1.01);
}
.ps-shot:hover img{
  filter:grayscale(0) brightness(.95) contrast(1);
  transform:scale(1.045);
}
.ps-shot figcaption{
  padding:11px 16px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.ps-kicker{
  display:inline-block;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--biolum);
  margin-bottom:14px;
}
.ps-info h3{
  font-family:var(--serif);
  font-size:clamp(26px, 2.6vw, 38px);
  font-weight:400;
  margin:0 0 14px;
}
.ps-info > p{
  margin:0 0 20px;
  line-height:1.75;
  color:var(--muted);
}
.ps-info .product-points{ margin-bottom:24px; }
.ps-facts{
  display:flex;
  gap:clamp(20px, 3vw, 44px);
  margin:0 0 26px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.ps-facts b{
  font-family:var(--serif);
  font-size:clamp(24px, 2.2vw, 34px);
  font-weight:400;
  color:var(--gold);
}
.ps-facts span{
  display:block;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:4px;
}
@media (max-width:900px){
  .product-sub{ grid-template-columns:1fr; }
  .ps-shot{ max-width:560px; }
  .ps-facts{ flex-wrap:wrap; gap:18px 28px; }
}

/* ============================================================
   SERVICE ORNAMENTS — one living glyph per layer
   ============================================================ */
.serv-orn{
  position:absolute;
  top:16px; right:16px;
  width:100px; height:100px;
  pointer-events:none;
  z-index:0;
  opacity:.55;
  transition:opacity .5s;
}
.serv:hover .serv-orn{ opacity:.95; }
/* keep card content above the ornament */
.serv .serv-idx, .serv .serv-badge, .serv h3, .serv > p,
.serv .serv-list, .serv .serv-foot{
  position:relative; z-index:1;
}

@keyframes ornSpin{ to{ transform:rotate(1turn); } }

/* 01 — brand: concentric gold rings */
.serv-orn--1{
  width:88px; height:88px;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.5);
  animation:ornSpin 24s linear infinite;
}
.serv-orn--1::before{
  content:""; position:absolute; inset:-15px;
  border-radius:50%;
  border:1px dashed rgba(212,175,55,.35);
  animation:ornSpin 36s linear infinite reverse;
}
.serv-orn--1::after{
  content:""; position:absolute; inset:36%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.75), rgba(212,175,55,0) 70%);
}

/* 02 — sites: a living browser window */
.serv-orn--2{
  top:54px; right:16px;
  width:100px; height:68px;
  border:1px solid rgba(85,227,200,.4);
  border-radius:8px;
  background:
    radial-gradient(circle at 10px 11px, rgba(85,227,200,.7) 1.5px, transparent 2.5px),
    radial-gradient(circle at 19px 11px, rgba(85,227,200,.45) 1.5px, transparent 2.5px),
    radial-gradient(circle at 28px 11px, rgba(85,227,200,.25) 1.5px, transparent 2.5px);
  animation:ornFloat 7s ease-in-out infinite;
}
.serv-orn--2::before{
  content:""; position:absolute;
  top:22px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(85,227,200,.35), transparent);
}
.serv-orn--2::after{
  content:""; position:absolute;
  top:32px; left:12px; right:12px; bottom:12px;
  background:repeating-linear-gradient(to bottom,
    rgba(85,227,200,.22) 0 1px, transparent 1px 11px);
}
@keyframes ornFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}

/* 03 — SEO: rising bars */
.serv-orn--3{
  width:68px; height:58px;
}
.serv-orn--3::before{
  content:""; position:absolute; left:0; bottom:0;
  width:36px; height:56px;
  background:
    linear-gradient(to top, rgba(85,227,200,.7), rgba(85,227,200,.08)) 0 100%/12px 28px no-repeat,
    linear-gradient(to top, rgba(85,227,200,.7), rgba(85,227,200,.08)) 22px 100%/12px 44px no-repeat;
  transform-origin:bottom;
  animation:ornBar 6s ease-in-out infinite;
}
.serv-orn--3::after{
  content:""; position:absolute; right:0; bottom:0;
  width:12px; height:56px;
  background:linear-gradient(to top, rgba(212,175,55,.7), rgba(212,175,55,.08));
  border-radius:2px 2px 0 0;
  transform-origin:bottom;
  animation:ornBar 6s ease-in-out .8s infinite;
}
@keyframes ornBar{
  0%,100%{ transform:scaleY(.72); }
  50%    { transform:scaleY(1); }
}

/* 04 — SMM: three talking dots */
.serv-orn--4{
  top:28px; right:34px;
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(85,227,200,.8);
  animation:ornDot 3.4s ease-in-out infinite;
}
.serv-orn--4::before{
  content:""; position:absolute;
  top:-16px; right:-18px;
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(85,227,200,.55);
  animation:ornDot 3.4s ease-in-out .5s infinite;
}
.serv-orn--4::after{
  content:""; position:absolute;
  top:14px; right:-12px;
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(85,227,200,.55);
  animation:ornDot 3.4s ease-in-out 1s infinite;
}
@keyframes ornDot{
  0%,100%{ opacity:.55; transform:translateY(0); }
  50%    { opacity:.95; transform:translateY(-3px); }
}

/* 05 — ads: targeting radar */
.serv-orn--5{
  width:82px; height:82px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(212,175,55,.55), rgba(212,175,55,0) 75deg, rgba(212,175,55,0) 360deg);
  -webkit-mask:radial-gradient(circle, transparent 55%, #000 56%);
          mask:radial-gradient(circle, transparent 55%, #000 56%);
  animation:ornSpin 14s linear infinite;
}
.serv-orn--5::before{
  content:""; position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.25);
}
.serv-orn--5::after{
  content:""; position:absolute; inset:40%;
  border-radius:50%;
  background:rgba(212,175,55,.7);
  box-shadow:0 0 12px rgba(212,175,55,.5);
}

/* 06 — AI: pulsing core with sonar ring */
.serv-orn--6{
  width:84px; height:84px;
  top:20px; right:20px;
  border:1px solid rgba(85,227,200,.4);
  border-radius:50%;
}
.serv-orn--6::before{
  content:""; position:absolute; inset:-12px;
  border-radius:50%;
  border:1px solid rgba(85,227,200,.3);
  animation:ornPing 5.5s ease-out infinite;
}
.serv-orn--6::after{
  content:""; position:absolute; inset:34%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(85,227,200,.9), rgba(85,227,200,0) 70%);
  animation:ornPulse 5s ease-in-out infinite;
}
@keyframes ornPing{
  0%  { transform:scale(.72); opacity:.9; }
  100%{ transform:scale(1.3); opacity:0; }
}
@keyframes ornPulse{
  0%,100%{ transform:scale(.92); }
  50%    { transform:scale(1.05); }
}

/* chapter mark gets a slow shine sweep */
.chap-num{
  position:relative;
  overflow:hidden;
}
.chap-num::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 30%, rgba(212,175,55,.22) 50%, transparent 70%);
  transform:translateX(-120%);
  animation:chapShine 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes chapShine{
  0%,55%{ transform:translateX(-120%); }
  100%  { transform:translateX(120%); }
}

@media (prefers-reduced-motion: reduce){
  .serv-orn, .serv-orn::before, .serv-orn::after,
  .chap-num::before{
    animation:none !important;
  }
  .serv-orn{ opacity:.4; }
}

/* ============================================================
   ПИСЬМО-АРТЕФАКТ: мягкий золотой маячок — «нажми меня»
   Медленно, дорого: дышит свечение, печать слегка живая,
   появляется подсказка «открыть». После открытия всё гаснет.
   ============================================================ */
.letter:not([data-open="true"]) .letter-flap{
  animation:letterBeacon 5s ease-in-out infinite;
}
.letter[data-open="true"] .letter-flap{ animation:none; }

@keyframes letterBeacon{
  0%,100%{
    box-shadow:0 30px 70px -40px rgba(0,0,0,.9), inset 0 0 60px rgba(85,227,200,.05);
    border-color:rgba(212,175,55,.35);
  }
  50%{
    box-shadow:0 30px 70px -40px rgba(0,0,0,.9), inset 0 0 60px rgba(85,227,200,.07), 0 0 46px rgba(212,175,55,.22);
    border-color:rgba(212,175,55,.62);
  }
}

/* печать-символ медленно «дышит» */
.letter:not([data-open="true"]) .letter-flap svg{
  animation:sealBreathe 5s ease-in-out infinite;
}
.letter[data-open="true"] .letter-flap svg{ animation:none; }
@keyframes sealBreathe{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%    { transform:scale(1.07); opacity:1; }
}

/* подсказка появляется плавно, циклами */
.letter:not([data-open="true"]) .letter-flap::after{
  content:"открыть";
  position:absolute;
  bottom:16px; left:50%;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:rgba(212,175,55,.8);
  pointer-events:none;
  animation:letterHint 5s ease-in-out infinite;
}
.letter[data-open="true"] .letter-flap::after{ content:none; }
@keyframes letterHint{
  0%,30%  { opacity:0; }
  50%,72% { opacity:1; }
  100%    { opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .letter-flap, .letter-flap svg, .letter-flap::after{ animation:none !important; }
  .letter-flap::after{ opacity:.7; }
}

/* ============================================================
   RESPONSIVE / MOTION PREFERENCES
   ============================================================ */
@media (max-width: 900px){
  .hero::before{ filter:blur(20px); opacity:.7; }
  #creovibe::after{ display:none; }
  #services::after{ opacity:.5; }
  .case-media::after{ display:none; }
}

@media (max-width: 700px){
  #process .steps::before,
  #process .steps::after{ display:none; }
  #manifest::after{ opacity:.55; }
  #artifact::after{ opacity:.3; }
  .sonar-click{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .hero::before,
  .hero::after,
  #manifest::after,
  #manifest .aside-card::before,
  #manifest .aside-glow,
  #services::after,
  .serv::after,
  .serv h3::after,
  #creovibe::after,
  .product-shot::after,
  .pv-eq i,
  .pmode::after,
  .quiz::after,
  .quiz-track span,
  .case::after,
  .case-media::after,
  #process .steps::before,
  #process .steps::after,
  .step-i::after,
  #artifact::after,
  .letter::before,
  #contact::after,
  .contact-depth,
  .foot::before,
  .foot-mark{
    animation:none !important;
  }
  .sonar-click{ display:none; }
}