/* Bobatrip "Coming Soon" story — shared by the video composition and the Cloudflare page.
   Brand tokens come from the Bobatrip prototype (styles.css, converted from OKLCH) and the official logo files. */
@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-style:normal;font-display:block;src:url(../fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:normal;font-display:block;src:url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-style:normal;font-display:block;src:url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-style:normal;font-display:block;src:url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}

:root{
  --navy:#173A53;      /* logo navy */
  --navy-s:#254C64;    /* --navy-soft */
  --sea:#4B9F87;       /* logo green */
  --sea-l:#7FD1B8;     /* logo green on dark (wordmark-light) */
  --sea-s:#007C60;     /* --sea-strong */
  --mint:#D9F7EB;
  --mint-2:#C1EDDC;
  --paper:#FAFDFE;
  --bg:#F0F8FB;
  --line:#D0E1E7;
  --gold:#E9AB2B;
  --ink:#142C3A;
  --muted:#4B616F;
}

#stage{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
#stage *{box-sizing:border-box}
#shaker{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:540px 960px}
.scn{position:absolute;left:0;top:0;width:1080px;height:1920px}
.bg{position:absolute;left:var(--bgpad,-80px);top:var(--bgpad,-80px);right:var(--bgpad,-80px);bottom:var(--bgpad,-80px)}
.cam{position:absolute;left:0;top:0;width:1080px;height:1920px}
.abs{position:absolute}
.nw{white-space:nowrap}
.ch{display:inline-block;white-space:pre;will-change:transform}
.msk{overflow:hidden;padding:10px 24px 26px;margin:-10px -24px -26px}
#flash{position:absolute;left:var(--bgpad,-80px);top:var(--bgpad,-80px);right:var(--bgpad,-80px);bottom:var(--bgpad,-80px);background:#fff;opacity:0;pointer-events:none;z-index:900}

/* shared components */
.tile{display:grid;place-items:center;border-radius:40px;box-shadow:0 14px 30px rgba(23,58,83,.18),inset 0 2px 0 rgba(255,255,255,.35)}
.tile svg{display:block}
.soft{box-shadow:0 22px 44px rgba(23,58,83,.14),0 2px 0 rgba(255,255,255,.9) inset}
.btlogo{display:block;width:100%;height:100%;overflow:visible}
.ln{fill:var(--logo-n,#173A53)}
.lg{fill:var(--logo-g,#4B9F87)}
.lgs{stroke:var(--logo-g,#4B9F87)}
.dk{--logo-n:#FFFFFF;--logo-g:#7FD1B8}

/* S1 hook */
.row{position:absolute;display:flex;align-items:center;gap:26px;white-space:nowrap}
.word{font-weight:800;font-size:122px;line-height:1;letter-spacing:-.02em;color:var(--navy);padding-top:6px}
.win{position:absolute;width:330px;height:236px;border-radius:30px;background:var(--paper);overflow:hidden;
  box-shadow:0 26px 50px rgba(23,58,83,.22),0 0 0 3px rgba(23,58,83,.08)}
.win .wh{height:54px;display:flex;align-items:center;gap:9px;padding:0 20px}
.win .wh i{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.55);display:block}
.win .wh b{margin-left:10px;flex:1;height:24px;border-radius:12px;background:rgba(255,255,255,.34);display:block}
.win .wb{display:flex;align-items:center;gap:20px;padding:22px 24px}
.win .wt{width:92px;height:92px;border-radius:26px;display:grid;place-items:center;flex:none}
.win .wl{height:16px;border-radius:8px;background:var(--line);margin-bottom:14px}
.pill-hook{position:absolute;white-space:nowrap;background:var(--gold);color:var(--navy);font-weight:800;font-size:54px;
  line-height:1;letter-spacing:-.01em;padding:30px 46px 30px;border-radius:999px;
  box-shadow:0 20px 40px rgba(23,58,83,.22)}

/* S2 */
.h-line{font-weight:800;font-size:92px;line-height:1.06;letter-spacing:-.025em;color:#fff;white-space:nowrap;text-align:center}
.h-line em{font-style:normal;color:var(--sea-l)}

/* S3 */
.sp{position:absolute;width:840px;height:120px;border-radius:60px;background:var(--paper);display:flex;align-items:center}
.sp .typed{font-weight:700;font-size:42px;color:var(--navy-s);white-space:nowrap;display:flex;align-items:center}
.sp .btn{position:absolute;right:18px;top:18px;width:172px;height:84px;border-radius:42px;background:var(--sea);color:#fff;
  font-weight:800;font-size:38px;display:grid;place-items:center}
.mcard{position:absolute;width:330px;height:100px;border-radius:32px;background:var(--paper);display:flex;align-items:center;gap:20px;padding:0 20px 0 16px;
  box-shadow:0 16px 34px rgba(23,58,83,.14),0 2px 0 rgba(255,255,255,.9) inset}
.mcard .mt{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;flex:none}
.mcard .ml{font-weight:800;font-size:40px;color:var(--navy);letter-spacing:-.01em}
.acct{position:absolute;width:840px;height:140px;border-radius:44px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:26px;padding:0 30px 0 26px;
  box-shadow:0 24px 48px rgba(23,58,83,.28)}
.acct .at1{font-weight:800;font-size:50px;line-height:1;letter-spacing:-.015em}
.acct .at2{font-weight:600;font-size:30px;color:var(--sea-l);margin-top:8px}
.dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--sea);opacity:.55}

/* S4 */
.chip{position:absolute;white-space:nowrap;background:var(--navy);color:#fff;font-weight:800;font-size:40px;letter-spacing:.01em;padding:22px 44px;border-radius:999px;
  box-shadow:0 16px 32px rgba(23,58,83,.2)}
.adv{position:absolute;width:880px;height:250px;border-radius:48px;background:var(--paper);display:flex;align-items:center;gap:38px;padding:0 40px 0 42px;
  box-shadow:0 24px 48px rgba(23,58,83,.14),0 2px 0 rgba(255,255,255,.9) inset}
.adv .at{position:relative;width:166px;height:166px;border-radius:46px;flex:none;overflow:hidden;box-shadow:0 12px 26px rgba(23,58,83,.2)}
.adv .aw{font-weight:800;font-size:72px;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.adv .ad{font-weight:600;font-size:34px;line-height:1.3;color:var(--muted);margin-top:12px}
.seg{position:relative;width:330px;height:60px;border-radius:30px;background:#E3EEF2;margin-top:16px;display:flex}
.seg span{position:relative;z-index:2;flex:1;display:grid;place-items:center;font-weight:800;font-size:27px;color:var(--muted)}
.seg .th{position:absolute;left:5px;top:5px;width:158px;height:50px;border-radius:25px;background:var(--navy);z-index:1}

/* S5 */
.stamp{position:absolute;white-space:nowrap;background:var(--sea-l);color:var(--navy);font-weight:800;font-size:96px;line-height:1;letter-spacing:-.01em;
  padding:34px 56px 34px;border-radius:110px;box-shadow:0 26px 50px rgba(0,0,0,.28)}
.seg5{position:absolute;white-space:nowrap;color:#fff;font-weight:700;font-size:42px;letter-spacing:.01em}
.url{position:absolute;white-space:nowrap;background:var(--paper);color:var(--navy);font-weight:800;font-size:74px;line-height:1.25;letter-spacing:-.015em;padding:22px 66px 24px;border-radius:999px;overflow:hidden;
  box-shadow:0 24px 46px rgba(0,0,0,.26)}
.url .sheen{position:absolute;top:-10%;left:0;width:64px;height:120%;background:rgba(75,159,135,.24);transform:skewX(-22deg)}
.tagline{position:absolute;white-space:nowrap;color:#fff;font-weight:700;font-size:36px;line-height:1;text-transform:uppercase}

.cf{position:absolute;will-change:transform}
.amb{position:absolute;pointer-events:none}
.amb svg{display:block}
.ring{position:absolute;border-radius:50%;pointer-events:none}