/* HOME PAGE v6 */

/* ── HERO ── */
.hero{
  position:relative;width:100%;height:100vh;min-height:700px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:transparent;transition:background 0.45s;
}

/* Hero body — centred */
.hero-body{
  position:relative;z-index:10;
  text-align:center;padding:0 var(--pad);
  max-width:1100px;width:100%;
  display:flex;flex-direction:column;align-items:center;
}

.hero-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:32px;font-size:10px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--fg3);
  opacity:0;animation:fadeUp 0.7s var(--ease-o) 0.5s forwards;transition:color 0.45s;
}
.he-dot{width:5px;height:5px;background:var(--blue);border-radius:50%;flex-shrink:0}
.he-sep{color:var(--line2)}

.hero-title{
  font-family:var(--fh);
  font-size:clamp(80px,14.5vw,200px);
  line-height:0.87;text-transform:uppercase;letter-spacing:-0.02em;
  margin-bottom:28px;color:var(--fg);text-align:center;
  transition:color 0.45s;display:flex;flex-direction:column;gap:0;
}
.hl{display:block;opacity:0;transform:translateY(36px);animation:fadeUp 0.85s var(--ease-o) forwards}
.hl:nth-child(1){animation-delay:0.55s}
.hl:nth-child(2){animation-delay:0.67s}
.hl:nth-child(3){animation-delay:0.79s}

.hero-sub{
  font-size:16px;font-weight:400;line-height:1.72;color:var(--fg2);
  max-width:440px;margin-bottom:36px;text-align:center;
  opacity:0;animation:fadeUp 0.7s var(--ease-o) 1s forwards;transition:color 0.45s;
}
.hero-btns{
  display:flex;gap:12px;justify-content:center;
  opacity:0;animation:fadeUp 0.6s var(--ease-o) 1.2s forwards;
}

/* Scroll indicator */
.scroll-ind{
  position:absolute;bottom:72px;left:var(--pad);
  display:flex;align-items:center;gap:12px;
  opacity:0;animation:fadeIn 0.8s 1.75s forwards;
}
.si-rail{width:1px;height:42px;background:var(--line);overflow:hidden}
.si-thumb{width:100%;height:12px;background:var(--blue);animation:siScroll 2s ease-in-out infinite}
@keyframes siScroll{
  0%{transform:translateY(-12px)}60%{transform:translateY(42px)}
  61%{transform:translateY(-12px);opacity:0}62%{opacity:1}100%{transform:translateY(-12px)}
}
.scroll-ind span{
  font-size:9px;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--fg3);writing-mode:vertical-rl;transform:rotate(180deg);transition:color 0.45s;
}

/* Ticker */
.ticker-bar{
  position:absolute;bottom:0;left:0;right:0;
  padding:11px 0;overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--overlay);backdrop-filter:blur(8px);
  transition:background 0.45s,border-color 0.45s;
}
.ticker-inner{display:flex;white-space:nowrap;animation:tickerAnim 36s linear infinite;width:max-content}
.ticker-inner span{
  font-family:var(--fb);font-size:11px;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--fg3);padding:0 14px;
  white-space:nowrap;transition:color 0.45s;
}
.ticker-inner em{font-style:normal;color:var(--blue);font-weight:900;padding:0 4px}
@keyframes tickerAnim{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── FULL-WIDTH VIDEO — auto playing ── */
.video-full{position:relative;background:#0c0c0c;width:100%}
.vf-label{
  position:absolute;top:24px;left:var(--pad);z-index:10;
  font-size:10px;font-weight:700;letter-spacing:0.28em;
  text-transform:uppercase;color:rgba(255,255,255,0.35);
}
.vf-wrap{position:relative;width:100%;height:90vh;min-height:540px;overflow:hidden}
.vf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.85}
.vf-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform 0.4s var(--ease)}
.vf-art svg{width:100%;height:100%;display:block}


/* ── HOME WORK GRID ── */
.home-work{padding:100px var(--pad);background:var(--bg);transition:background 0.45s}
.hw-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:48px;max-width:var(--max);margin-left:auto;margin-right:auto;
  gap:20px;flex-wrap:wrap;
}
.hw-all{
  white-space:nowrap;
  align-self:flex-end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:200px;
  padding:14px 32px;
}
.hw-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hw-card{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:4px;overflow:hidden;
  transition:border-color 0.25s,box-shadow 0.35s,transform 0.35s var(--ease-b),background 0.45s;cursor:none;
}
.hw-card:hover{border-color:var(--fg2);box-shadow:0 8px 32px rgba(0,0,0,0.07);transform:translateY(-4px)}

.hw-card-full{grid-column:span 2}
.hwc-img{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--bg3);transition:background 0.45s}
.hw-card-full .hwc-img{aspect-ratio:21/9}
.hwc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(0.82);transition:transform 0.65s var(--ease-o),filter 0.4s}
.hw-card:hover .hwc-photo{transform:scale(1.06);filter:saturate(1.05)}
.hwc-hover{position:absolute;inset:0;background:rgba(20,20,20,0.9);backdrop-filter:blur(4px);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;opacity:0;transition:opacity 0.3s}
.hw-card:hover .hwc-hover{opacity:1}
.hwh-q{font-family:var(--fh);font-size:20px;color:var(--yellow);margin-bottom:8px;line-height:1.15}
.hwh-a{font-size:13px;color:rgba(255,255,255,0.62);line-height:1.6;margin-bottom:16px}
.hwh-cta{font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.5);border-bottom:1px solid rgba(255,255,255,0.22);padding-bottom:2px;display:inline-block}
.hwc-body{padding:20px 24px 24px;background:var(--card);transition:background 0.45s}
.hwc-tags{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.hwc-tags span{font-size:9px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;padding:3px 10px;border:1px solid var(--line);border-radius:1px;color:var(--fg3);transition:border-color 0.2s,color 0.2s}
.hwc-name{font-family:var(--fh);font-size:clamp(22px,2.4vw,32px);text-transform:uppercase;letter-spacing:0.02em;margin-bottom:6px;color:var(--fg);transition:color 0.45s}
.hwc-desc{font-size:13px;line-height:1.65;color:var(--fg2);max-width:480px;transition:color 0.45s}

/* ── ABOUT STRIP — no circular art, bold stats ── */
.about-strip{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  padding:100px var(--pad);background:var(--bg2);
  align-items:start;transition:background 0.45s;
}
.as-big{
  font-family:var(--fh);font-size:clamp(52px,7.5vw,108px);
  line-height:0.92;text-transform:uppercase;margin-bottom:24px;
  color:var(--fg);transition:color 0.45s;
}
.as-left .sec-eyebrow{display:block}
.as-left p{font-size:16px;line-height:1.8;color:var(--fg2);max-width:460px;margin-bottom:32px;transition:color 0.45s}
/* No as-art / circular SVG — removed */

.as-right{display:flex;flex-direction:column;gap:0;padding-top:8px}
.as-stat{
  display:grid;grid-template-columns:120px 1fr;align-items:center;
  padding:24px 0;border-bottom:1px solid var(--line);
  transition:border-color 0.45s,background 0.3s,padding 0.3s;border-radius:4px;
}
.as-stat:last-child{border-bottom:none}
.as-stat:hover{background:var(--bg3);padding:24px 16px}
.as-num{
  font-family:var(--fh);font-size:clamp(64px,7vw,96px);
  line-height:1;color:var(--blue);transition:color 0.45s,transform 0.3s var(--ease-b);
}
.as-stat:hover .as-num{transform:scale(1.05)}
.as-lbl{
  font-family:var(--fh);font-size:clamp(22px,2.5vw,36px);
  letter-spacing:0.04em;text-transform:uppercase;color:var(--fg);
  transition:color 0.45s;line-height:1;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media(max-width:1000px){
  .hw-grid{grid-template-columns:1fr}
  .hw-card-full{grid-column:span 1}
  .about-strip{grid-template-columns:1fr;gap:48px}
  .vf-wrap{height:55vh}
}
@media(max-width:640px){
  .hero-btns{flex-direction:column;align-items:center}
  .hw-header{flex-direction:column;align-items:flex-start}
}

/* ── Video art fallback — hidden when video loads ── */
.vf-art {
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* ── Video click-to-play ── */
.vf-play-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 5; cursor: none;
  transition: opacity 0.4s;
}
.vf-play-hint.is-playing { opacity: 0; pointer-events: none; }
.vf-play-ring {
  position: absolute;
  width: 96px; height: 96px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  animation: vsRing 2.8s ease-in-out infinite;
}
@keyframes vsRing {
  0%,100% { transform: scale(1); opacity: 0.2; }
  50%      { transform: scale(1.22); opacity: 0.06; }
}
.vf-play-icon {
  position: absolute;
  width: 64px; height: 64px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: none;
  transition: transform 0.25s var(--ease), background 0.2s;
}
.vf-play-icon:hover { transform: scale(1.1); background: #e6b800; }
.vf-play-icon svg { width: 26px; height: 26px; color: #111; margin-left: 3px; }
.pg-video-wrap { position: relative; }
.pg-video { width: 100%; height: auto; display: block; object-fit: cover; }


/* hero must be position:relative with overflow:hidden already */


/* Blob 1 — large blue/grey, top-left, mouse-tracking (JS moves it) */


/* Blob 2 — warm peach/orange, top-right */


/* Blob 3 — soft teal/green, bottom-right */


/* Blob 4 — muted coral/rose, bottom-left */


/* Blob 5 — centre yellow warmth (very subtle) */


/* Blob 6 — soft lavender, upper-right accent */


/* Independent drift animations for each blob */

  33%  { transform: translate(4vw, 5vh) scale(1.08); }
  66%  { transform: translate(-3vw, 2vh) scale(0.95); }
  100% { transform: translate(2vw, -4vh) scale(1.05); }
}

  33%  { transform: translate(-5vw, 4vh) scale(1.06); }
  66%  { transform: translate(3vw, -3vh) scale(1.02); }
  100% { transform: translate(-2vw, 6vh) scale(0.96); }
}

  50%  { transform: translate(-6vw, -5vh) scale(1.1); }
  100% { transform: translate(4vw, 3vh) scale(0.94); }
}

  40%  { transform: translate(5vw, -4vh) scale(1.07); }
  100% { transform: translate(-3vw, 5vh) scale(1.03); }
}

  50%  { transform: translate(3vw, 4vh) scale(1.12); }
  100% { transform: translate(-4vw, -3vh) scale(0.92); }
}

  40%  { transform: translate(-4vw, 5vh) scale(1.05); }
  100% { transform: translate(5vw, -4vh) scale(0.98); }
}