/* =========================================================
   日米観光交流促進キャンペーン2026 – ダイジョウブ！はじめてのアメリカ in 大阪
   Layout / spacing mostly use Tailwind CSS utilities in index.html (built to tailwind.css).
   This file contains: @font-face, design tokens, shared components,
   decorative (lazy) backgrounds, stage cards, animations and reduced-motion.
   ========================================================= */

/* ---------- Fonts (local) ---------- */
@font-face {
  font-family: "BebasNeue Regular";
  src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rounded Mplus 1c Heavy";
  src: url("../fonts/MPLUSRounded1c-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oswald Regular";
  src: url("../fonts/Oswald-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --c-ink: #261b3a;
  --c-lav: #eceaf5;
  --c-violet: #5a539c;
  --c-royal: #314c97;
  --c-pink: #c94789;
  --c-orange: #eb9c3d;
  --c-sky: #22a1d4;
  --c-leaf: #4aa555;
  --c-mute: #8481a2;
  --c-stage: #5d63a4;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --s: 1; /* scale of decorative background shapes (smaller on small screens) */
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: "Rounded Mplus 1c Heavy", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 800;
  color: var(--c-ink);
  background: #fff;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

/* ---------- Section heading (shared) ---------- */
.sec-title {
  margin: 0;
  font-family: "BebasNeue Regular", "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.sec-sub {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 1.6;
}

.sec-sub--lg {
  font-size: 24px;
  line-height: 1.5;
}

.sec-bars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}

.sec-bars i {
  display: block;
  width: 20px;
  height: 6px;
}

.sec-bars i:nth-child(1) { background: #5a539c; }
.sec-bars i:nth-child(2) { background: #c94789; }
.sec-bars i:nth-child(3) { background: #22a1d4; }
.sec-bars i:nth-child(4) { background: #4aa555; }
.sec-bars i:nth-child(5) { background: #eb9c3d; }

@media (min-width: 768px) {
  .sec-title { font-size: 54px; }
  .sec-sub { font-size: 24px; }
  .sec-sub--lg { font-size: 30px; }
}

@media (min-width: 1024px) {
  .sec-title { font-size: 64px; }
  .sec-sub { margin-top: 11px; font-size: 26px; line-height: 46px; }
  .sec-sub--lg { font-size: 36px; line-height: 63px; margin-top: 7px; }
  .sec-bars { margin-top: 15px; }
}

/* ---------- Coming Soon text ---------- */
.coming-soon {
  font-size: 22px;
  line-height: 1.2;
  color: #aaa9d4;
}

@media (min-width: 768px) {
  .coming-soon { font-size: 22px; }
}

@media (min-width: 1024px) {
  .coming-soon { font-size: 30px; }
}

/* ---------- Buttons / links ---------- */
.btn {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -8px rgba(38, 27, 58, 0.45);
  filter: brightness(1.06);
}

.btn:active {
  transform: translateY(-1px);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 3px;
}

/* ---------- Tie-up video frames ---------- */
.video-frame {
  position: relative;
  aspect-ratio: 544 / 306;
  background: var(--c-royal);
  box-shadow: 10px 10px 0 var(--shadow, #1eb4d9);
}

/* ---------- Decorative section backgrounds (lazy) ----------
   Background images are only applied when the section nears the viewport (.is-loaded is added by JS). */
.bg-deco {
  position: relative;
  isolation: isolate;
}

.bg-deco::before,
.bg-deco::after {
  content: "";
  position: absolute;
  z-index: -1;
  opacity: 0;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.bg-deco.is-loaded::before,
.bg-deco.is-loaded::after {
  opacity: 1;
}

/* About: left / right polygons (bg-about.webp 1440x520) */
.bg-deco--about::before,
.bg-deco--about::after {
  top: 0;
  bottom: 0;
  background-size: calc(1440px * var(--s)) 100%;
}
.bg-deco--about::before { left: 0; width: calc(300px * var(--s)); background-position: left top; }
.bg-deco--about::after { right: 0; width: calc(260px * var(--s)); background-position: right top; }
.bg-deco--about.is-loaded::before,
.bg-deco--about.is-loaded::after { background-image: url("../imgs/webp/bg-about.webp"); }

/* Stage event: pink corner (top-left) + orange corner (bottom-right) (bg-stage-event.webp 1440x1400) */
.bg-deco--stage::before,
.bg-deco--stage::after {
  height: calc(80px * var(--s));
  background-size: calc(1440px * var(--s)) calc(1400px * var(--s));
}
.bg-deco--stage::before { top: 0; left: 0; width: calc(420px * var(--s)); background-position: left top; }
.bg-deco--stage::after { bottom: 0; right: 0; width: calc(480px * var(--s)); background-position: right bottom; }
.bg-deco--stage.is-loaded::before,
.bg-deco--stage.is-loaded::after { background-image: url("../imgs/webp/bg-stage-event.webp"); }

/* Booth: green triangle (bottom-left) (bg-booth.webp 1440x557) */
.bg-deco--booth::before {
  bottom: 0;
  left: 0;
  width: calc(260px * var(--s));
  height: calc(100px * var(--s));
  background-size: calc(1440px * var(--s)) calc(557px * var(--s));
  background-position: left bottom;
}
.bg-deco--booth.is-loaded::before { background-image: url("../imgs/webp/bg-booth.webp"); }

@media (max-width: 1023.98px) { :root { --s: 0.7; } }
@media (max-width: 639.98px) { :root { --s: 0.42; } }

/* ---------- Stage cards ---------- */
.stage-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.stage-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 30px -14px rgba(20, 14, 50, 0.55);
}

.stage-card__media {
  position: relative;
  aspect-ratio: 352 / 230;
  overflow: hidden;
  background: #fff;
}

.stage-card__zoom {
  position: absolute;
  inset: 0;
  transition: transform 0.7s var(--ease-out);
}

.stage-card:hover .stage-card__zoom {
  transform: scale(1.05);
}

.stage-card__zoom img {
  position: absolute;
  max-width: none;
  height: auto;
}

/* Crop positions follow the PDF design (% of the 352x230 frame) */
.crop-1 img { left: 0; top: -16.96%; width: 100%; }
/* Elmo: whole content shown (logo + character + copyright), blank margins trimmed so it renders larger */
.crop-2 img { left: 27.4%; top: -11.54%; width: 45.25%; }
.crop-3 img { left: -18.75%; top: -3.9%; width: 137.5%; }
.crop-cover img,
.crop-contain img { left: 0; top: 0; width: 100%; height: 100%; }
.crop-cover img { object-fit: cover; }
.crop-contain img { object-fit: contain; }
.crop-magic img { object-position: 50% 20%; }
.crop-santa img { object-position: 50% 15%; }
/* Letterbox background that matches the photo (shown when the whole image is contained) */
/* Magic show: the gradient is sampled from the photo's left/right edges, and the photo's own
   side edges are feathered with a mask so the photo blends into the background (no visible seam) */
.stage-card__media--magic {
  background: linear-gradient(to bottom, #060409 0%, #14071d 12%, #1e0e2b 25%, #231033 38%, #261638 50%, #31213e 62%, #3f2d48 75%, #47314d 88%, #47334d 100%);
}
.stage-card__media--magic img {
  left: 50%;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.stage-card__media--black { background: #000; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 26px;
  border-radius: 9999px;
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

/* ---------- Footer ---------- */
.footer-bar {
  height: 8px;
  background: linear-gradient(90deg, #5f5eaa 0 20%, #cd4d92 20% 40%, #00bde9 40% 60%, #50b961 60% 80%, #f6a93f 80% 100%);
}

/* ---------- Scroll reveal ---------- */
.js-ready .reveal {
  opacity: 0;
  transform: translate3d(var(--rx, 0), var(--ry, 0), 0) scale(var(--rs, 1));
  transition: opacity 0.8s ease, transform 0.8s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.js-ready .reveal:not(.is-visible) {
  will-change: opacity, transform;
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal[data-reveal="up"] { --ry: 32px; }
.reveal[data-reveal="down"] { --ry: -32px; }
.reveal[data-reveal="left"] { --rx: -40px; }
.reveal[data-reveal="right"] { --rx: 40px; }
.reveal[data-reveal="zoom"] { --rs: 0.94; }
.reveal[data-reveal="slide"] { --rx: -64px; }

@media (max-width: 767.98px) {
  .reveal[data-reveal="up"] { --ry: 20px; }
  .reveal[data-reveal="down"] { --ry: -20px; }
  .reveal[data-reveal="left"] { --rx: -20px; }
  .reveal[data-reveal="right"] { --rx: 20px; }
  .reveal[data-reveal="slide"] { --rx: -28px; }
}

/* Fade-in for lazy images (dimensions are declared, so no layout shift) */
.js-ready img[data-fade] {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.js-ready img[data-fade].is-loaded {
  opacity: 1;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .stage-card:hover,
  .stage-card:hover .stage-card__zoom {
    transform: none;
  }
}