/* ========================================
   SOKSON / Front Page — Hero + Services
   ======================================== */

/* Hero */
.sks-hero{
  position:relative;min-height:100dvh;overflow:hidden;
  background:
    radial-gradient(ellipse 700px 500px at 50% 28%,rgba(225,191,134,0.14),transparent 55%),
    radial-gradient(ellipse 400px 300px at 75% 18%,rgba(196,154,93,0.06),transparent 50%),
    radial-gradient(ellipse 300px 400px at 20% 65%,rgba(140,100,45,0.04),transparent 50%),
    linear-gradient(180deg,#060607 0%,#08080b 100%);
}
.sks-hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.012) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 40%,rgba(0,0,0,0.24) 0%,transparent 72%);
  opacity:0.18;pointer-events:none;z-index:1;
}

/* BG layers */
.sks-hero-bg{position:absolute;inset:0;z-index:0;}

.sks-hero-bg__base{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 38%,rgba(196,154,93,0.12),transparent 20%),
    radial-gradient(circle at 82% 20%,rgba(255,255,255,0.018),transparent 18%),
    radial-gradient(circle at 18% 70%,rgba(196,154,93,0.04),transparent 20%);
  transform-origin:center;
  animation:sksBgDrift 18s ease-in-out infinite alternate;
}

.sks-hero-bg__core{
  position:absolute;inset:12% 26% 18% 26%;border-radius:50%;
  background:radial-gradient(circle,rgba(196,154,93,0.10) 0%,rgba(196,154,93,0.04) 36%,transparent 72%);
  filter:blur(42px);
  animation:sksPulseCore 8s ease-in-out infinite alternate;
}

.sks-hero-bg__grain{
  position:absolute;inset:0;opacity:0.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sks-hero-bg__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,0.54) 100%),
    linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.38));
}

/* Aura rotation */
.sks-hero-bg::after{
  content:"";position:absolute;inset:-12% -18%;pointer-events:none;
  background:conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,rgba(196,154,93,0.035) 58deg,transparent 110deg,
    rgba(255,255,255,0.012) 190deg,transparent 250deg,
    rgba(196,154,93,0.028) 314deg,transparent 360deg
  );
  filter:blur(44px);opacity:0.36;mix-blend-mode:screen;
  animation:sksAuraRotate 34s linear infinite;
}

/* Lines */
.sks-hero-bg__line{
  position:absolute;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,154,93,0.16),transparent);opacity:0.6;
}
.sks-hero-bg__line--1{
  width:220px;top:34%;left:66%;transform:rotate(-8deg);
  animation:sksLineSweep1 15s ease-in-out infinite;
}
.sks-hero-bg__line--2{
  width:180px;top:62%;left:18%;transform:rotate(12deg);
  animation:sksLineSweep2 17s ease-in-out infinite;
}

/* Sparks */
.sks-hero-bg__spark{
  position:absolute;border-radius:50%;
  background:rgba(196,154,93,0.32);box-shadow:0 0 20px rgba(196,154,93,0.18);
}
.sks-hero-bg__spark--1{
  width:2px;height:2px;top:30%;left:24%;
  animation:sksFloatSpark1 14s ease-in-out infinite,sksSparkPulse 5.6s ease-in-out infinite;
}
.sks-hero-bg__spark--2{
  width:2px;height:2px;top:56%;left:74%;
  animation:sksFloatSpark2 16s ease-in-out infinite,sksSparkPulse 6.4s ease-in-out infinite;
}
.sks-hero-bg__spark--3{
  width:1.5px;height:1.5px;top:72%;left:52%;
  animation:sksFloatSpark1 20s ease-in-out infinite reverse,sksSparkPulse 7s ease-in-out infinite;
}

/* Hero unblur on load */
body:not(.is-loaded) .sks-hero{opacity:0.01;transform:scale(1.02);filter:blur(12px);}
body.is-loaded .sks-hero{
  opacity:1;transform:scale(1);filter:blur(0);
  transition:opacity 1.3s ease,transform 1.6s var(--sks-ease),filter 1.3s ease;
}

/* Hero content */
.sks-hero-inner{
  position:relative;z-index:10;
  width:min(1240px,calc(100% - 88px));margin:0 auto;padding:156px 0 108px;
}
.sks-hero-copy{max-width:920px;}

.sks-hero-kicker{
  margin:0 0 26px;font-family:var(--sks-f-ui);font-size:11px;font-weight:500;
  letter-spacing:0.34em;color:rgba(225,191,134,0.62);text-transform:uppercase;
  opacity:0;animation:sksFadeUp 0.9s var(--sks-ease) 0.8s forwards;
}

.sks-hero-heading{
  margin:0 0 28px;font-family:var(--sks-f-serif);
  font-size:clamp(52px,6.2vw,90px);font-weight:400;line-height:1.18;
  letter-spacing:0.02em;color:var(--sks-text);
  text-shadow:0 2px 30px rgba(196,154,93,0.06),0 0 80px rgba(196,154,93,0.03);
  opacity:0;animation:sksFadeUp 1s var(--sks-ease) 1s forwards;
}
.sks-hero-heading em{
  font-style:normal;color:transparent;
  background:linear-gradient(90deg,#a47a3a 0%,#d4aa62 20%,#fff8ec 50%,#d4aa62 80%,#a47a3a 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:sksGoldShimmer 5s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(196,154,93,0.15));
}
@keyframes sksGoldShimmer{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.sks-hero-heading__line{display:block;}

.sks-hero-sub{
  margin:0 0 10px;font-family:var(--sks-f-serif);
  font-size:clamp(18px,2.1vw,24px);line-height:1.7;
  letter-spacing:0.08em;color:var(--sks-text-80);
  opacity:0;animation:sksFadeUp 1s var(--sks-ease) 1.18s forwards;
}

.sks-hero-credit{
  margin:0 0 34px;font-family:var(--sks-f-ui);font-size:11px;font-weight:500;
  letter-spacing:0.32em;color:rgba(225,191,134,0.72);text-transform:uppercase;
  opacity:0;animation:sksFadeUp 1s var(--sks-ease) 1.32s forwards;
}

.sks-hero-desc{
  max-width:38em;margin:0 0 40px;font-family:var(--sks-f-sans);
  font-size:clamp(14px,1.45vw,16px);line-height:2.05;color:var(--sks-text-56);
  opacity:0;animation:sksFadeUp 1s var(--sks-ease) 1.46s forwards;
}

/* Hero actions */
.sks-hero-actions{
  display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;margin-bottom:48px;
  opacity:0;animation:sksFadeUp 1s var(--sks-ease) 1.60s forwards;
}

.sks-btn-primary{
  position:relative;display:inline-flex;justify-content:center;align-items:center;
  min-width:286px;min-height:60px;padding:0 32px;
  border:1px solid rgba(196,154,93,0.40);
  border-radius:var(--sks-radius-btn);
  background:
    linear-gradient(180deg,rgba(255,255,255,0.018),rgba(255,255,255,0.004)),
    rgba(10,10,13,0.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 34px rgba(0,0,0,0.20),
    0 0 0 0 rgba(196,154,93,0);
  text-decoration:none;overflow:hidden;
  transition:all 0.45s var(--sks-ease);
}
.sks-btn-primary:hover{
  border-color:rgba(225,191,134,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 44px rgba(0,0,0,0.25),
    0 0 20px rgba(196,154,93,0.08),
    0 0 0 3px rgba(196,154,93,0.04);
  transform:translateY(-2px);
}
.sks-btn-primary::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(225,191,134,0.18),transparent);
  transform:translateX(-120%);transition:transform 0.8s var(--sks-ease);
}
.sks-btn-primary:hover::before{transform:translateX(120%);}

/* Button scan */
.sks-btn-primary::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-24%;width:18%;
  background:linear-gradient(
    90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.04) 20%,
    rgba(225,191,134,0.22) 50%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%
  );
  transform:skewX(-20deg) translateX(-220%);
  animation:sksButtonScan 6.6s var(--sks-ease) infinite;pointer-events:none;
}

.sks-btn-primary__text{
  position:relative;z-index:1;font-family:var(--sks-f-sans);
  font-size:12.5px;letter-spacing:0.16em;color:rgba(225,191,134,0.96);
}

.sks-link-secondary{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--sks-text-56);font-size:12px;letter-spacing:0.12em;
}
.sks-link-secondary__dot{
  width:4px;height:4px;border-radius:50%;background:rgba(196,154,93,0.56);
  animation:sksDotPulse 4.8s ease-in-out infinite;
}
.sks-link-secondary__arrow{transition:transform 0.3s var(--sks-ease);}
.sks-link-secondary:hover .sks-link-secondary__arrow{transform:translateX(5px);}

/* ========================================
   Hero Brand Chart — 大きく登場→描画→光る→縮んで右へ
   ======================================== */
.sks-hero-brand{
  position:absolute;z-index:8;
  /* 最終位置: 右側に収まる */
  right:0;top:50%;width:420px;
  transform:translateY(-50%);
  opacity:0;
  pointer-events:none;
}
/* Phase 1: 画面中央に大きく表示 */
.sks-hero-brand.is-big{
  opacity:1;
  /* 中央に大きく拡大 */
  right:50%;
  transform:translate(50%,-50%) scale(2.2);
  transform-origin:center center;
  transition:none;
}
/* Phase 2: 描画中 (is-drawn) — まだ大きいまま */
.sks-hero-brand.is-drawn{
  opacity:1;
}
/* Phase 3: 光った後 → 縮んで右に収まる (is-settled) — JS spring handles motion */
.sks-hero-brand.is-settled{
  opacity:1;
  right:0;
  transform:translateY(-50%) scale(1);
  /* No CSS transition — JS spring physics creates natural arc motion */
  pointer-events:auto;
}

.sks-hero-brand__glow{
  position:absolute;inset:-30%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 85% 15%,rgba(212,170,98,0.18) 0%,rgba(196,154,93,0.06) 40%,transparent 70%);
  filter:blur(28px);opacity:0;
  transition:opacity 1s ease;
}
.sks-hero-brand.is-settled .sks-hero-brand__glow{
  opacity:1;
  animation:sksBrandGlow 5s ease-in-out infinite alternate;
}
@keyframes sksBrandGlow{
  from{opacity:0.5;transform:scale(0.94);}
  to{opacity:1;transform:scale(1.06);}
}

.sks-hero-brand__svg{
  position:relative;z-index:1;width:100%;height:auto;display:block;
  shape-rendering:geometricPrecision;
}
/* During spring settle, will-change hint for GPU compositing */
.sks-hero-brand.is-spring{will-change:transform;}

/* === Chart draw — JS controls all animation via rAF === */
.sks-chart__line{
  stroke-dasharray:var(--chart-len,900);
  stroke-dashoffset:var(--chart-len,900);
  /* No CSS transition — JS drives this frame-by-frame */
}

/* Glow line — also JS-driven */
.sks-chart__glow-line{
  stroke-dasharray:var(--chart-len,900);
  stroke-dashoffset:var(--chart-len,900);
}

/* Tip glow — follows the drawing point */
.sks-chart__tip-glow{
  mix-blend-mode:screen;
  will-change:cx,cy,opacity;
}
.sks-chart__tip-dot{
  will-change:cx,cy,opacity;
}

/* Elements start hidden — JS reveals them at the right moment */
.sks-chart__axis,
.sks-chart__area,
.sks-chart__bg,
.sks-chart__dip,
.sks-chart__dot-start,
.sks-chart__peak-beam,
.sks-chart__flash,
.sks-chart__flash-ring,
.sks-chart__dot-peak-glow{
  transition:opacity 0.5s ease;
}

/* Peak flash animation — triggered by JS adding .is-flash */
.sks-chart__flash.is-flash{
  animation:sksChartFlash 0.8s ease-out forwards;
}
.sks-chart__flash.is-pulse{
  animation:sksChartFlashPulse 2.5s ease-in-out infinite;
}
@keyframes sksChartFlash{
  0%  {r:4;  opacity:1;}
  15% {r:28; opacity:1;}
  35% {r:48; opacity:0.85;}
  55% {r:55; opacity:0.45;}
  80% {r:12; opacity:0.7;}
  100%{r:6;  opacity:0.85;}
}
@keyframes sksChartFlashPulse{
  0%,100%{r:5;opacity:0.6;}
  50%    {r:11;opacity:1;}
}

/* Ring burst */
.sks-chart__flash-ring.is-flash{
  animation:sksChartRingBurst 1s ease-out forwards;
}
@keyframes sksChartRingBurst{
  0%  {r:8; opacity:1;stroke-width:2.5;}
  40% {r:34;opacity:0.7;stroke-width:1.2;}
  100%{r:60;opacity:0;stroke-width:0.1;}
}

/* Persistent peak glow */
.sks-chart__dot-peak-glow.is-on{
  animation:sksChartPeakPulse 3.2s ease-in-out infinite;
}
@keyframes sksChartPeakPulse{
  0%,100%{opacity:0.06;}
  50%    {opacity:0.24;}
}

/* Dip marker reveal animation */
.sks-chart__dip.is-visible{
  animation:sksChartDipReveal 0.6s ease-out forwards;
}
@keyframes sksChartDipReveal{
  0%  {opacity:0;r:0;}
  50% {opacity:0.7;}
  100%{opacity:0.5;}
}

/* Tip trail particle (spawned by JS) */
.sks-chart-trail{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff8ec 0%,#efcd93 40%,transparent 70%);
  opacity:0;z-index:20;
  animation:sksTrailFade 0.7s ease-out forwards;
}
@keyframes sksTrailFade{
  0%  {opacity:0.6;transform:scale(1);}
  100%{opacity:0;transform:scale(0.2) translateY(8px);}
}

/* Matrix */
.sks-hero-matrix{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  opacity:0;animation:sksFadeUp 1s var(--sks-ease) 1.78s forwards;
}
.sks-hero-matrix__item{
  min-height:154px;padding:22px 20px 20px;border-radius:20px;
  border:1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg,rgba(255,255,255,0.018),rgba(255,255,255,0.006)),
    linear-gradient(135deg,rgba(196,154,93,0.02),transparent 40%),
    #0e0f12;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.015),0 16px 36px rgba(0,0,0,0.18);
  transition:all 0.45s var(--sks-ease);
}
.sks-hero-matrix__item:hover{
  transform:translateY(-4px);border-color:rgba(196,154,93,0.18);
}
.sks-hero-matrix__label{
  margin-bottom:10px;font-family:var(--sks-f-en);font-size:11px;
  letter-spacing:0.16em;color:var(--sks-text-24);
}
.sks-hero-matrix__title{
  margin-bottom:10px;font-family:var(--sks-f-en);font-size:18px;
  letter-spacing:0.14em;color:var(--sks-text);
}
.sks-hero-matrix__text{font-size:13px;line-height:1.9;color:var(--sks-text-56);}

/* Scroll cue */
.sks-scroll-cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:12;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;
  animation:sksFadeUp 1s var(--sks-ease) 2s forwards,sksFloatScroll 2.8s ease-in-out 2.8s infinite;
}
.sks-scroll-cue__label{
  font-family:var(--sks-f-en);font-size:8px;letter-spacing:0.24em;color:var(--sks-text-14);
}
.sks-scroll-cue__bar{position:relative;width:1px;height:22px;overflow:hidden;}
.sks-scroll-cue__bar::after{
  content:"";position:absolute;top:-100%;left:0;width:1px;height:100%;
  background:linear-gradient(to bottom,transparent,rgba(196,154,93,0.42));
  animation:sksScrollLine 2.2s ease-in-out infinite;
}

/* ========================================
   Services
   ======================================== */
.sks-services{
  position:relative;padding:110px 40px 114px;overflow:hidden;
  background:
    radial-gradient(ellipse 700px 300px at 50% 0%,rgba(225,191,134,0.07),transparent 55%),
    radial-gradient(ellipse 400px 400px at 80% 60%,rgba(196,154,93,0.025),transparent 50%),
    radial-gradient(ellipse 300px 300px at 15% 40%,rgba(140,100,45,0.02),transparent 50%),
    linear-gradient(180deg,#090a0c 0%,#0d0f14 50%,#0b0c0f 100%);
}
.sks-services::before{
  content:"";position:absolute;top:0;left:40px;width:calc(100% - 80px);height:1px;
  background:linear-gradient(
    90deg,rgba(196,154,93,0.02) 0%,rgba(196,154,93,0.18) 20%,
    rgba(196,154,93,0.52) 50%,rgba(196,154,93,0.18) 80%,rgba(196,154,93,0.02) 100%
  );
  transform:scaleX(0);transition:transform 1.4s var(--sks-ease);
}
.sks-services.sks-line-visible::before{transform:scaleX(1);}
.sks-services::after{
  content:"";position:absolute;top:-140px;left:50%;
  width:min(760px,82vw);height:220px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(196,154,93,0.07) 0%,rgba(196,154,93,0.025) 34%,transparent 72%);
  filter:blur(30px);opacity:0.72;
}

.sks-services__breath{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(600px,80vw);height:min(600px,80vw);pointer-events:none;
  background:radial-gradient(circle,rgba(196,154,93,0.05) 0%,transparent 60%);
  filter:blur(60px);
  animation:sksServiceBreath 6s ease-in-out infinite alternate;
}
@keyframes sksServiceBreath{
  from{opacity:0.3;transform:translate(-50%,-50%) scale(0.9);}
  to{opacity:0.7;transform:translate(-50%,-50%) scale(1.1);}
}
.sks-services__head,.sks-cards{width:min(1180px,100%);margin-left:auto;margin-right:auto;}
.sks-services__head{margin-bottom:38px;}

.sks-services__label{
  margin:0 0 16px;font-family:var(--sks-f-ui);font-size:10px;font-weight:500;
  letter-spacing:0.30em;color:rgba(225,191,134,0.40);text-transform:uppercase;
}
.sks-services__title{
  margin:0 0 12px;font-family:var(--sks-f-serif);
  font-size:clamp(34px,3.1vw,46px);font-weight:400;line-height:1.4;
  letter-spacing:0.04em;color:var(--sks-text);
}
.sks-services__lead{margin:0;font-size:14px;line-height:2;color:var(--sks-text-56);}

/* Cards */
.sks-cards{display:grid;gap:24px;}
.sks-cards--4col{grid-template-columns:repeat(4,minmax(0,1fr));}
.sks-cards-dots{display:none;} /* Hidden on desktop */

.sks-card{
  position:relative;display:flex;flex-direction:column;
  min-height:292px;padding:28px 24px 24px;border-radius:var(--sks-radius-card);
  border:1px solid var(--sks-glass-border);
  background:var(--sks-glass-shine),#0f1117;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 44px rgba(0,0,0,0.22);
  text-decoration:none;color:inherit;overflow:hidden;
  transform-origin:center bottom;will-change:transform,opacity,filter;
  transition:
    transform 0.55s var(--sks-ease),border-color 0.45s var(--sks-ease),
    box-shadow 0.45s var(--sks-ease),background 0.45s var(--sks-ease),filter 0.45s var(--sks-ease);
}
.sks-card::before{
  content:"";position:absolute;top:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,191,134,0.65),transparent);
  opacity:0;transform:scaleX(0);
  transition:transform 0.9s var(--sks-ease) 0.15s,opacity 0.5s ease 0.1s;
}
.sks-card.is-visible::before{
  opacity:0.9;transform:scaleX(1);
}
.sks-card::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle 180px at 100% 0%,rgba(196,154,93,0.06),transparent 50%),
    radial-gradient(circle 120px at 0% 100%,rgba(196,154,93,0.02),transparent 50%);
  pointer-events:none;opacity:0.8;transition:opacity 0.45s ease;
}

.sks-card:hover{
  transform:translateY(-10px) scale(1.008);
  border-color:rgba(196,154,93,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 58px rgba(0,0,0,0.30),
    0 0 32px rgba(196,154,93,0.06);
}
.sks-card:hover::after{opacity:1;}
.sks-card:hover .sks-card__name{color:var(--sks-gold-4,#faecd4);}
.sks-card:hover .sks-card__arrow{transform:translateX(12px);color:var(--sks-gold-3);}

.sks-card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.sks-card__index{font-family:var(--sks-f-en);font-size:11px;letter-spacing:0.14em;color:var(--sks-text-24);}
.sks-card__icon{font-family:var(--sks-f-en);font-size:10px;letter-spacing:0.22em;color:rgba(196,154,93,0.70);}

.sks-card__body{flex:1;}
.sks-card__name{
  margin:0 0 14px;font-family:var(--sks-f-en);font-size:22px;
  letter-spacing:0.14em;color:rgba(248,243,235,0.96);
  transition:color 0.35s var(--sks-ease);
}
.sks-card__desc{margin:0;font-family:var(--sks-f-serif);font-size:13.5px;line-height:2.0;color:var(--sks-text-68);}

.sks-card__foot{margin-top:24px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.05);}
.sks-card__arrow{
  font-family:var(--sks-f-en);font-size:22px;color:rgba(196,154,93,0.80);
  transition:transform 0.35s var(--sks-ease);
}

/* ========================================
   Motion keyframes
   ======================================== */
@keyframes sksBgDrift{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(0,-1.2%,0) scale(1.035);}
}
@keyframes sksAuraRotate{from{transform:rotate(0deg) scale(1);}to{transform:rotate(360deg) scale(1.04);}}
@keyframes sksPulseCore{from{transform:scale(0.96);opacity:0.74;}to{transform:scale(1.04);opacity:1;}}

@keyframes sksFloatSpark1{
  0%,100%{transform:translate(0,0);opacity:0.18;}
  50%{transform:translate(18px,-12px);opacity:0.42;}
}
@keyframes sksFloatSpark2{
  0%,100%{transform:translate(0,0);opacity:0.14;}
  50%{transform:translate(-16px,10px);opacity:0.34;}
}
@keyframes sksSparkPulse{
  0%,100%{opacity:0.16;box-shadow:0 0 10px rgba(196,154,93,0.08);}
  50%{opacity:0.42;box-shadow:0 0 22px rgba(196,154,93,0.18);}
}

@keyframes sksLineSweep1{
  0%,100%{opacity:0.18;transform:rotate(-8deg) translateX(0);}
  50%{opacity:0.48;transform:rotate(-8deg) translateX(52px);}
}
@keyframes sksLineSweep2{
  0%,100%{opacity:0.12;transform:rotate(12deg) translateX(0);}
  50%{opacity:0.34;transform:rotate(12deg) translateX(-40px);}
}

@keyframes sksButtonScan{
  0%,72%{transform:skewX(-20deg) translateX(-220%);opacity:0;}
  76%{opacity:1;}
  92%{transform:skewX(-20deg) translateX(620%);opacity:1;}
  100%{transform:skewX(-20deg) translateX(620%);opacity:0;}
}
@keyframes sksDotPulse{
  0%,100%{transform:scale(1);opacity:0.56;}
  50%{transform:scale(1.6);opacity:0.9;}
}

@keyframes sksScrollLine{0%{top:-100%;}50%{top:0%;}100%{top:100%;}}
@keyframes sksFloatScroll{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(4px);}
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width:1100px){
  .sks-cards--4col{grid-template-columns:1fr 1fr;}
  .sks-hero-matrix{grid-template-columns:1fr;}
  .sks-hero-matrix__item{min-height:0;}
}

@media (max-width:768px){
  .sks-hero-inner{
    width:calc(100% - 40px);
    padding:calc(env(safe-area-inset-top) + 112px) 0 calc(env(safe-area-inset-bottom) + 72px);
  }
  .sks-hero-kicker{font-size:9px;letter-spacing:0.26em;margin-bottom:18px;}
  .sks-hero-heading{font-size:clamp(38px,10.4vw,54px);line-height:1.16;margin-bottom:20px;}
  .sks-hero-sub{font-size:16px;line-height:1.7;}
  .sks-hero-credit{font-size:10px;letter-spacing:0.24em;margin-bottom:24px;}
  .sks-hero-desc{font-size:14px;line-height:1.9;max-width:21em;margin-bottom:30px;}

  .sks-hero-actions{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:34px;}
  .sks-btn-primary{min-width:0;width:100%;max-width:320px;min-height:54px;}
  .sks-link-secondary{justify-content:center;font-size:12px;}

  .sks-hero-matrix{gap:14px;}
  .sks-hero-matrix__item{padding:20px 18px;border-radius:18px;}
  .sks-hero-matrix__title{font-size:17px;}

  /* Hero chart — mobile: below text, relative positioning */
  .sks-hero-brand{
    position:relative;right:auto;top:auto;
    width:100%;max-width:360px;margin:24px auto 0;
    transform:none;
  }
  .sks-hero-brand.is-big{
    position:fixed;right:50%;top:50%;
    width:90vw;max-width:none;margin:0;
    transform:translate(50%,-50%) scale(1.6);
    z-index:9999;
  }
  .sks-hero-brand.is-settled{
    position:relative;right:auto;top:auto;
    width:100%;max-width:360px;margin:24px auto 0;
    transform:none;
    /* No CSS transition — JS spring physics */
  }

  .sks-scroll-cue{bottom:12px;opacity:0.28;}
  .sks-scroll-cue__label{font-size:7px;letter-spacing:0.16em;}
  .sks-scroll-cue__bar{height:16px;}

  .sks-services{padding:72px 16px 72px;}
  .sks-services::before{left:16px;width:calc(100% - 32px);}
  .sks-services::after{top:-120px;width:92vw;height:180px;opacity:0.56;}

  .sks-services__head{margin-bottom:24px;}
  .sks-services__label{margin-bottom:12px;font-size:9px;letter-spacing:0.24em;}
  .sks-services__title{font-size:clamp(30px,8.8vw,40px);line-height:1.38;}
  .sks-services__lead{font-size:13px;line-height:1.9;}

  /* Carousel mode on mobile */
  .sks-cards--4col,.sks-cards{
    display:flex;gap:16px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 16px 20px;
  }
  .sks-cards::-webkit-scrollbar{display:none;}
  .sks-cards .sks-card{
    flex:0 0 82vw;max-width:340px;
    scroll-snap-align:center;
  }

  /* Carousel dot indicator */
  .sks-cards-dots{
    display:flex;justify-content:center;gap:8px;padding:12px 0 0;
  }
  .sks-cards-dot{
    width:6px;height:6px;border-radius:50%;
    background:rgba(255,255,255,0.14);
    transition:all 0.35s var(--sks-ease);
  }
  .sks-cards-dot.is-active{
    background:var(--sks-gold);width:20px;border-radius:3px;
    box-shadow:0 0 8px rgba(196,154,93,0.3);
  }
  .sks-card{min-height:0;padding:24px 20px 22px;border-radius:18px;}
  .sks-card__top{margin-bottom:16px;}
  .sks-card__name{font-size:19px;margin-bottom:12px;}
  .sks-card__desc{font-size:13px;line-height:1.82;}
  .sks-card__desc br{display:none;}
  .sks-card__foot{margin-top:20px;}

  .sks-card:hover{transform:translateY(-6px) scale(1.003);}

  .sks-hero-bg::after{opacity:0.24;filter:blur(34px);}
}

/* ========================================
   Mobile immersion extras
   ======================================== */
/* Hero touch-follow spotlight */
.sks-hero-spotlight{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(circle 180px at var(--spot-x,50%) var(--spot-y,50%),
    rgba(196,154,93,0.07) 0%,transparent 100%);
  opacity:0;transition:opacity 0.5s ease;
  mix-blend-mode:screen;
}
.sks-hero-spotlight.is-active{opacity:1;}

/* Hero floating gold dust */
.sks-hero-dust{
  position:absolute;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle,rgba(239,205,147,0.7) 0%,rgba(196,154,93,0.3) 40%,transparent 70%);
  animation:sksHeroDust var(--dust-dur,8s) ease-in-out infinite alternate;
  opacity:0;
}
@keyframes sksHeroDust{
  0%  {transform:translate(0,0) scale(1);   opacity:0;}
  15% {                                       opacity:var(--dust-op,0.4);}
  50% {transform:translate(var(--dust-dx,20px),var(--dust-dy,-30px)) scale(0.8);}
  85% {                                       opacity:var(--dust-op,0.4);}
  100%{transform:translate(var(--dust-dx2,-15px),var(--dust-dy2,20px)) scale(1.1); opacity:0;}
}

/* Scroll momentum particles */
.sks-scroll-spark{
  position:fixed;border-radius:50%;pointer-events:none;z-index:9990;
  background:var(--sks-gold);
  opacity:0;
  animation:sksScrollSpark 0.6s ease-out forwards;
}
@keyframes sksScrollSpark{
  0%  {opacity:0.7;transform:translateY(0) scale(1);}
  100%{opacity:0;transform:translateY(var(--spark-dir,-30px)) scale(0.2);}
}

/* Section light sweep */
.sks-section-sweep{
  position:absolute;top:0;left:-100%;width:60%;height:100%;
  pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent 0%,rgba(196,154,93,0.06) 40%,rgba(196,154,93,0.10) 50%,rgba(196,154,93,0.06) 60%,transparent 100%);
  transition:none;
}
.sks-section-sweep.is-sweeping{
  animation:sksSectionSweep 1.2s ease-out forwards;
}
@keyframes sksSectionSweep{
  0%  {left:-60%;}
  100%{left:120%;}
}

/* Hero breathing ambient */
.sks-hero-breathe{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 60% 40%,rgba(196,154,93,0.04) 0%,transparent 70%);
  animation:sksHeroBreathe 6s ease-in-out infinite;
}
@keyframes sksHeroBreathe{
  0%,100%{opacity:0.3;transform:scale(1);}
  50%    {opacity:1;  transform:scale(1.08);}
}

/* Touch crater impression */
.sks-touch-crater{
  position:fixed;pointer-events:none;z-index:9988;border-radius:50%;
  background:radial-gradient(circle,rgba(196,154,93,0.12) 0%,rgba(196,154,93,0.04) 40%,transparent 70%);
  animation:sksCrater 0.5s ease-out forwards;
  transform:translate(-50%,-50%);
}
@keyframes sksCrater{
  0%  {opacity:1;width:0;height:0;}
  40% {opacity:0.7;width:120px;height:120px;}
  100%{opacity:0;width:160px;height:160px;}
}

/* Card 3D tilt in carousel */
.sks-card.is-tilted{
  transition:transform 0.4s var(--sks-ease);
}

/* Pull shimmer overlay */
.sks-pull-shimmer{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:9997;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--sks-gold),rgba(239,205,147,0.8),var(--sks-gold),transparent);
  opacity:0;transform:scaleY(0);transform-origin:top;
  transition:opacity 0.2s ease,transform 0.2s ease;
}
.sks-pull-shimmer.is-active{
  opacity:1;transform:scaleY(1);
}

@media (prefers-reduced-motion:reduce){
  .sks-hero,.sks-hero-bg__base,.sks-hero-bg::after,
  .sks-hero-bg__line--1,.sks-hero-bg__line--2,
  .sks-hero-bg__spark--1,.sks-hero-bg__spark--2,.sks-hero-bg__spark--3,
  .sks-hero-bg__core,.sks-btn-primary::after,.sks-link-secondary__dot,
  .sks-scroll-cue{
    animation:none !important;transform:none !important;
  }
  .sks-hero-kicker,.sks-hero-heading,.sks-hero-sub,.sks-hero-credit,
  .sks-hero-desc,.sks-hero-actions,.sks-hero-matrix,.sks-hero-brand,.sks-scroll-cue{
    opacity:1 !important;
  }
  .sks-hero-brand{
    right:0 !important;transform:translateY(-50%) !important;
    transition:none !important;pointer-events:auto !important;
  }
  .sks-hero-brand__glow{animation:none !important;}
  .sks-chart__line,.sks-chart__glow-line{stroke-dashoffset:0 !important;}
  .sks-chart__axis,.sks-chart__area,.sks-chart__glow-line,
  .sks-chart__bg,.sks-chart__dip,
  .sks-chart__dot-start,.sks-chart__peak-beam,.sks-chart__flash,
  .sks-chart__flash-ring,.sks-chart__dot-peak-glow{
    opacity:1 !important;transition:none !important;animation:none !important;
  }
  .sks-chart__tip-glow,.sks-chart__tip-dot{opacity:0 !important;}
  .sks-chart-trail,.sks-scroll-spark,.sks-touch-crater,.sks-hero-dust{display:none !important;}
  .sks-hero-spotlight,.sks-hero-breathe,.sks-section-sweep,.sks-pull-shimmer{display:none !important;}
  body:not(.is-loaded) .sks-hero{opacity:1;}
}