@font-face{
  font-family:'Hyundai Sans Head';
  src:url('assets/fonts/HyundaiSansHeadPro-Regular.woff2') format('woff2');
  font-weight:100 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Hyundai Sans Head';
  src:url('assets/fonts/HyundaiSansHeadPro-Bold.woff2') format('woff2');
  font-weight:600 900;font-style:normal;font-display:swap;
}
:root{
  --blue:#002c5f;
  --sky:#00aad2;
  --paper:#f7f3ee;
  --ink:#111820;
  --ease:cubic-bezier(.22,.82,.28,1);
  --font:'Hyundai Sans Head',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#181818;font-family:var(--font)}
.banner{
  width:970px;height:250px;position:relative;overflow:hidden;background:#d5dde0;color:#fff;
  user-select:none;isolation:isolate;border:1px solid rgba(255,255,255,.08)
}
.brandbar{
  position:absolute;left:0;right:0;top:0;height:43px;z-index:40;display:flex;align-items:center;
  padding:0 18px;background:linear-gradient(180deg,rgba(5,20,32,.6),rgba(5,20,32,.12));pointer-events:none
}
.hyundai-brand{display:flex;align-items:center;width:170px}
.hyundai-logo{height:15px;width:auto;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.campaign-tag{font-size:9px;font-weight:800;letter-spacing:2px;opacity:.88;flex:1;text-align:center}
.progress{width:170px;text-align:right;font-size:7px;letter-spacing:1.1px;opacity:.8}
.progress b{font-size:12px;margin-right:5px;color:#fff}
.hover-hint{
  position:absolute;z-index:38;top:28px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:800;
  letter-spacing:2.1px;display:flex;align-items:center;gap:7px;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:opacity .3s,transform .3s
}
.hover-hint span{display:block;width:21px;height:1px;background:rgba(255,255,255,.7)}
.banner.engaged .hover-hint{opacity:0;transform:translate(-50%,-6px)}
.panels{position:absolute;inset:0;display:flex;z-index:2}
.panel{
  position:relative;width:50%;height:100%;overflow:hidden;isolation:isolate;outline:none;cursor:pointer;
  transition:width .58s var(--ease),filter .45s ease
}
.panel+.panel{border-left:1px solid rgba(255,255,255,.28)}
.city-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-5;filter:saturate(.94) contrast(1.03);transform:scale(1.035);transition:transform .85s var(--ease),filter .4s}
.wash{position:absolute;inset:0;z-index:-4;background:linear-gradient(180deg,rgba(4,17,29,.26) 0%,rgba(4,17,29,.08) 38%,rgba(4,17,29,.46) 100%),linear-gradient(90deg,rgba(0,44,95,.22),transparent 55%);transition:background .45s}
.panel-bayon .wash{background:linear-gradient(180deg,rgba(5,18,27,.25),rgba(4,17,29,.1) 42%,rgba(4,17,29,.48)),linear-gradient(270deg,rgba(0,44,95,.18),transparent 58%)}
.mouse-light{position:absolute;inset:-40px;z-index:-3;background:radial-gradient(circle at var(--lx,50%) var(--ly,60%),rgba(255,255,255,.17),transparent 30%);opacity:.3;transition:opacity .25s}
.base-card{
  position:absolute;z-index:14;bottom:17px;left:21px;min-width:190px;padding:10px 14px 9px;border-radius:12px;
  background:rgba(22,20,21,.76);backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(0,0,0,.22);transition:opacity .25s,transform .38s var(--ease)
}
.panel-bayon .base-card{left:auto;right:21px;text-align:right}
.base-card strong{display:block;font-size:23px;line-height:1;letter-spacing:-.8px;margin-bottom:3px}
.base-card span{display:block;font-size:7px;font-weight:800;letter-spacing:1.15px;opacity:.86}
.fold-card{
  position:absolute;z-index:16;left:50%;bottom:-11px;width:185px;height:58px;padding:10px 12px;border-radius:12px;background:rgba(23,21,23,.84);
  backdrop-filter:blur(8px);opacity:0;transform:translateX(-50%) rotate(-38deg) translateY(25px);transition:opacity .22s,transform .5s var(--ease);
  box-shadow:0 8px 18px rgba(0,0,0,.25);text-align:left
}
.fold-card strong{display:block;font-size:18px;line-height:1}.fold-card span{font-size:7px;letter-spacing:1.2px;font-weight:800;opacity:.78}
.expanded-copy{
  position:absolute;z-index:18;top:63px;left:26px;width:292px;opacity:0;pointer-events:none;transform:translateX(-25px);transition:opacity .25s .08s,transform .48s var(--ease) .04s;text-shadow:0 2px 8px rgba(0,0,0,.23)
}
.panel-bayon .expanded-copy{left:28px}
.mini-logo{height:11px;width:auto;display:block;margin-bottom:6px;opacity:.92;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}
.kicker{font-size:8px;font-weight:800;letter-spacing:1.45px;margin-bottom:2px;opacity:.76}
.expanded-copy h2{font-size:40px;line-height:.9;margin:0 0 7px;letter-spacing:-2px}
.expanded-copy p{font-size:10px;line-height:1.28;margin:0 0 8px;width:285px;font-weight:600;color:rgba(255,255,255,.92)}
.chips{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}.chips span{font-size:7px;letter-spacing:.65px;font-weight:900;padding:4px 7px;border-radius:10px;background:rgba(0,44,95,.68);border:1px solid rgba(255,255,255,.38)}
.cta{display:inline-flex;align-items:center;gap:8px;height:27px;padding:0 11px;border-radius:14px;background:#fff;color:var(--blue);font-size:8px;font-weight:900;letter-spacing:.55px;text-decoration:none;box-shadow:0 8px 16px rgba(0,0,0,.18);pointer-events:auto;transition:transform .2s,box-shadow .2s}.cta:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.24)}.cta b{font-size:12px}
.seen-toast{position:absolute;z-index:60;right:15px;top:48px;padding:6px 9px;border-radius:12px;background:rgba(0,44,95,.88);backdrop-filter:blur(6px);opacity:0;transform:translateY(-6px);transition:.25s;pointer-events:none;font-size:7px;letter-spacing:.8px}.seen-toast.show{opacity:1;transform:translateY(0)}.seen-toast b{margin-right:5px}
/* reference-video state: active panel opens, other panel turns into narrow product strip */
.panels.has-active .panel{width:27%;filter:saturate(.72) brightness(.69)}
.panels.has-active .panel.active{width:73%;filter:none}
.panels.has-active .panel:not(.active) .city-photo{transform:scale(1.09);filter:saturate(.72) contrast(1.02)}
.panels.has-active .panel:not(.active) .wash{background:rgba(11,15,19,.36)}
.panels.has-active .panel:not(.active) .base-card{opacity:0;transform:translateY(18px)}
.panels.has-active .panel:not(.active) .fold-card{opacity:1;transform:translateX(-50%) rotate(-38deg) translateY(0)}
.panels.has-active .panel:not(.active) .car{opacity:.68;filter:drop-shadow(0 11px 8px rgba(0,0,0,.38)) brightness(.9)}
.panel.active .city-photo{transform:scale(1.008)}
.panel.active .mouse-light{opacity:.9}
.panel.active .base-card{opacity:0;transform:translateY(16px)}
.panel.active .expanded-copy{opacity:1;transform:translateX(0)}
/* non-active car placement */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}