/*
 * Edit/Build by: Bruce
 * Date: 2026-10-29 09:48
 *
 * 2026-10-29 09:48 update (motion standardization): local --ease/--fast/--base
 * removed, uses css/motion.css tokens. Normal speed: hero 400ms (delays
 * 80/160ms), dash 400ms, tile crossfade 400ms. Scroll reveal rules moved to
 * css/motion.css (gate class now html.doog-motion, state class .is-in).
 *
 * 2026-10-26 13:51 update: .why-cta (About us button in Why Doog).
 *
 * Top Page (Home) styles, English. Loaded only on the EN front page and on
 * page-top.php (see the enqueue block in functions.php).
 * Converted from Page Design/Top Page/mock-ups/top-v2.html.
 *
 * 2026-10-26 12:05 update: synced to the 2026-10-26 11:17 mockup.
 * - New: Why Doog (1b) and Get started (3b) sections.
 * - New: motion. Slower hero entrance with background fade, scroll-reveal,
 *   product photo settle, Why Doog dash draw, tile slideshows, partner logo
 *   loop. Hide-then-reveal rules only apply under html.top-motion, which
 *   the inline head script in functions.php sets (motion allowed + JS on).
 * - Removed the divider lines between sections (.product + .product,
 *   .updates border-top). The mockup has none.
 * - Hero pull-up is now -72px at 950px and up (desktop header is 72px,
 *   header.css), -60px below. Was -60px everywhere.
 *
 * Changes vs. the mockup <style> block:
 * - Wrapper class .top-v2 renamed .top-page. Motion gate class .js renamed
 *   .top-motion so it can't clash with other scripts.
 * - Mockup-only global rules removed: html{...}, body{...}, .skip-link{...}
 *   (header.php and header.css own the skip link).
 * - Font size reset to 16px on the wrapper (page.css sets body to 2rem/21px).
 * - page.css global "ol li:before" counter switched off inside .start-list.
 * - Hero sky strip comes from ACF via --hero-strip (set inline in
 *   template-parts/top/home-en.php). City image is an <img> from ACF.
 * - Background photos point to img/top/*.webp (resized copies).
 * - Get started aside sticks at 104px (72px header + 32px), was 32px.
 * - Unused .hero-visual and .hero-sub .mark rules removed (no such elements).
 */

/* ─── Design tokens: mirrors design/DoogWeb-design.md ─────────── */
.top-page{
  --green:       #069A44;  /* primary */
  --green-hover: #058A3C;  /* primary-hover */
  --green-a:     #047A35;  /* primary-accessible */
  --green-bright:#04c95a;
  --surface:     #FAF9F5;
  --ink:         #141413;
  --on-dark:     #FAF9F5;
  --border:      #8A9199;
  --muted-a:     #5A6370;
  --divider:     rgba(138,145,153,0.28);
  --r-sm: 4px;
  --r-md: 6px;
  --max-w:   1280px;
  --gutter:  32px;
  --section: 96px;

  font-family:'Manrope',sans-serif;
  font-size:16px;
  background:var(--surface);
  color:var(--ink);
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

/* ─── Reset ───────────────────────────────────────────────────── */
.top-page *,.top-page *::before,.top-page *::after{box-sizing:border-box}
.top-page img{display:block;max-width:100%;height:auto}
.top-page h1,.top-page h2,.top-page h3,.top-page p,.top-page ul,.top-page ol,.top-page figure{margin:0}
.top-page ul,.top-page ol{list-style:none;padding:0}
.top-page [lang="ja"]{font-family:'Noto Sans JP',sans-serif;word-break:keep-all}

/* Browser surfaces themed from the palette */
.top-page ::selection{background:rgba(6,154,68,0.22);color:var(--ink)}
.top-page{accent-color:var(--green)}
.top-page a{text-underline-offset:0.2em}

/* ─── Focus ring ──────────────────────────────────────────────── */
.top-page a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}
.top-page a:focus:not(:focus-visible){outline:none}

.top-page .container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}

/* ─── Buttons ─────────────────────────────────────────────────── */
.top-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:16px 24px;border-radius:var(--r-sm);
  font-size:21px;font-weight:700;line-height:22px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:background var(--motion-fast) var(--ease-precision),color var(--motion-fast) var(--ease-precision),
             border-color var(--motion-fast) var(--ease-precision),transform var(--motion-fast) var(--ease-precision);
}
.top-page .btn svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-base) var(--ease-precision)}
.top-page .btn:hover svg{transform:translateX(3px)}
.top-page .btn-primary{background:var(--green);color:var(--surface);border-color:var(--green)}
.top-page .btn-primary:hover{background:var(--green-hover);border-color:var(--green-hover);color:var(--surface)}
.top-page .btn-primary:active{background:var(--green-a);border-color:var(--green-a);transform:scale(0.97)}
.top-page .btn-secondary{background:var(--surface);color:var(--green-a);border-color:var(--green)}
.top-page .btn-secondary:hover{background:#F2FBF5;border-color:var(--green-hover);color:var(--green-a)}
.top-page .btn-secondary:active{background:#E4F4EA;border-color:var(--green-a);transform:scale(0.97)}
.top-page .btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* Tertiary: text-only, always underlined, with a leading-edge arrow */
.top-page .btn-tertiary{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0;
  font-size:21px;font-weight:700;line-height:22px;color:var(--green-a);
  text-decoration:underline;text-decoration-thickness:2px;
  transition:color var(--motion-fast) var(--ease-precision);
}
.top-page .btn-tertiary svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-base) var(--ease-precision)}
.top-page .btn-tertiary:hover{color:var(--green)}
.top-page .btn-tertiary:hover svg{transform:translateX(3px)}
.top-page .btn-tertiary:active{color:var(--green-a)}

/* ─── 1. Hero: the one green surface ──────────────────────────── */
.top-page .hero{
  /* Same as live #doog_topimgbox_img: green base, sky strip tiled
     repeat-x, city illustration centered at natural size, 658px tall. */
  position:relative;
  margin-top:-60px; /* sit behind the fixed header (body padding-top: 60px) */
  background:var(--hero-strip, none) 0 0 repeat-x,#069A44;
  color:var(--ink);
  overflow:hidden;
  min-height:658px;
}
/* Desktop header is 72px from 950px up (header.css) */
@media (min-width:950px){.top-page .hero{margin-top:-72px}}
.top-page .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.top-page .hero-bg picture{display:block;width:100%;height:100%}
.top-page .hero-bg img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;max-width:none;height:auto;
}
.top-page .hero .container{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
  align-items:start;padding-block:112px 64px;
}
.top-page .hero-copy{position:relative;grid-column:span 12;justify-self:start;width:fit-content;max-width:100%;display:flex;flex-direction:column;gap:32px}
.top-page .hero-title{
  font-size:clamp(36px,7.8vw,62px);font-weight:700;line-height:1.1;letter-spacing:-0.3px;
  color:var(--ink);text-wrap:balance;
}
.top-page .hero-title .nb{display:block}
@media (min-width:641px){.top-page .hero-title .nb{white-space:nowrap}}
/* Cream on green is ~3.5:1: large bold text only (>=18.66px / 700) */
.top-page .hero-sub{display:flex;flex-direction:column;gap:12px;font-size:21px;font-weight:700;line-height:1.45;max-width:45ch}
.top-page .hero-sub p{max-width:45ch}

/* Hero entrance: background fades in and settles, then title, then sub */
@keyframes top-page-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes top-page-bg-in{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
.top-page .hero-bg{animation:top-page-bg-in var(--motion-slow) var(--ease-precision) both}
.top-page .hero-title{animation:top-page-rise var(--motion-slow) var(--ease-precision) 80ms both}
.top-page .hero-sub{animation:top-page-rise var(--motion-slow) var(--ease-precision) 160ms both}

/* Scroll reveal (.reveal / .reveal-media): shared, see css/motion.css */
/* "Why Doog" dash draws in from the left */
.doog-motion .top-page .why-title::before{transform:scaleX(0);transform-origin:left center;
  transition:transform var(--motion-slow) var(--ease-precision) 80ms}
.doog-motion .top-page .why-title.is-in::before{transform:none}
/* Screen-reader copy of the final stat; the animated number is aria-hidden */
.top-page .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─── 1b. Why Doog ────────────────────────────────────────────── */
.top-page .why{padding-block:var(--section);position:relative;overflow:hidden}
/* Background photo, left half, photo aligned to its right edge, 82% transparent (opacity .18). Decorative only. */
.top-page .why::before{
  content:"";position:absolute;inset:0 auto 0 0;width:50%;z-index:0;pointer-events:none;
  background:url("../img/top/why-bg.webp") right center / cover no-repeat;
  opacity:.18;
}
/* Layout: statement left, stat bento right.
   Tile fills: primary green, ink, and a bordered surface card. */
.top-page .why .container{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:start;
}
.top-page .why-copy{grid-column:span 6;display:flex;flex-direction:column;gap:24px}
.top-page .why-title{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:500;line-height:20px;color:var(--ink);
  text-shadow:0 0 8px var(--surface),0 0 16px var(--surface);
}
.top-page .why-title::before{content:"";flex:none;width:14px;height:2px;background:var(--green)}
.top-page .why-lead{
  font-size:clamp(26px,3.6vw,42px);font-weight:400;line-height:1.2;letter-spacing:-0.2px;
  text-wrap:pretty;
}
.top-page .why-lead strong{font-weight:700}
.top-page .why-body{
  /* body-md (fluid) */
  font-size:clamp(17px,2.6vw,21px);font-weight:400;line-height:24px;max-width:52ch;color:var(--ink);
  text-shadow:0 0 8px var(--surface),0 0 16px var(--surface);
}
.top-page .why-body strong{font-weight:700}
.top-page .why-cta{align-self:flex-start}
.top-page .why-stats{
  grid-column:7 / span 6;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
}
.top-page .why-stats li{
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  min-height:260px;padding:40px 32px;border-radius:var(--r-md);
}
/* Green tile: Bruce's call 2026-10-22, an exception to "green only on
   CTA / icons / hero". On-dark text on green is ~3.5:1, large text
   only, so the 19px label goes bold (>=18.7px / 700). */
.top-page .why-stats li:first-child{grid-column:span 2;background:var(--green);color:var(--on-dark)}
.top-page .why-stats li:first-child .l{font-weight:700}
.top-page .why-stats li:nth-child(-n+3){position:relative;overflow:hidden}
/* Research + deployment tiles: photo slideshow, right side, 75% transparent
   (opacity .25), soft edge fading out toward the left. Decorative only. */
.top-page .why-stats li:nth-child(-n+2) > .tile-slides{
  position:absolute;inset:0 0 0 auto;width:50%;z-index:0;pointer-events:none;
  opacity:.25;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 70%,transparent 100%);
  mask-image:linear-gradient(to left,#000 0%,#000 70%,transparent 100%);
}
.top-page .tile-slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--motion-slow) var(--ease-precision);
}
.top-page .tile-slides img.is-active{opacity:1}
/* How long each photo shows: SLIDE_TIME in js/top-page.js. */
.top-page .why-stats li:nth-child(1) > .tile-slides{transform:scale(1.1);transform-origin:right center}
/* Deployment photo: fade shifted 10% further left (starts 80%, ends past the edge). */
.top-page .why-stats li:nth-child(2){
  /* EDIT THESE to tune the deployment photo.
     --fade-start: where the fade begins (% from the right edge of the photo).
     --fade-end:   where it is fully clear (over 100% = past the photo edge).
     --img-width:  how wide the photo area is (% of the box).
     --img-opacity: 0 = invisible, 1 = solid. */
  --fade-start:80%;
  --fade-end:100%;
  --img-width:65%;
  --img-opacity:.25;
}
.top-page .why-stats li:nth-child(2) > .tile-slides{
  width:var(--img-width);opacity:var(--img-opacity);
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 var(--fade-start),transparent var(--fade-end));
  mask-image:linear-gradient(to left,#000 0%,#000 var(--fade-start),transparent var(--fade-end));
}
/* Partner logo grid in the partners tile. */
.top-page .why-stats li:nth-child(3){
  /* EDIT THESE to tune the partner logos (same knobs as the deployment tile). */
  --fade-start:70%;
  --fade-end:100%;
  --img-width:60%;
  --img-opacity:.25;
  /* Loop: --loop-h = height of one full logo grid, --loop-speed = time per loop. */
  --loop-h:300px;
  --loop-speed:30s;
}
.top-page .why-stats li:nth-child(3)::before{
  content:"";position:absolute;inset:0 0 0 auto;z-index:0;pointer-events:none;
  background-image:url("../img/top/partner-logos.webp");
  background-repeat:repeat-y;background-size:auto var(--loop-h);background-position:right 0;
  animation:top-page-partner-loop var(--loop-speed) linear infinite;
  width:var(--img-width);opacity:var(--img-opacity);
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 var(--fade-start),transparent var(--fade-end));
  mask-image:linear-gradient(to left,#000 0%,#000 var(--fade-start),transparent var(--fade-end));
}
/* Scrolls down one full grid height, then repeats with no jump. */
@keyframes top-page-partner-loop{to{background-position:right var(--loop-h)}}
.top-page .why-stats li:nth-child(-n+3) > *{position:relative;z-index:1}
.top-page .why-stats li:nth-child(2){background:var(--ink);color:var(--on-dark)}
.top-page .why-stats li:nth-child(3){background:var(--surface);color:var(--ink);border:1px solid var(--border)}
.top-page .why-stats .n{
  font-size:clamp(48px,6vw,80px);font-weight:700;line-height:1;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}
.top-page .why-stats .l{font-size:19px;line-height:1.45;font-weight:500;max-width:30ch}

/* ─── 2 + 3. Product sections ─────────────────────────────────── */
.top-page .product{padding-block:var(--section)}
.top-page .product .container{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:center;
}
.top-page .product-media{grid-column:span 7;border-radius:var(--r-md);overflow:hidden;background:#ECECEA}
.top-page .product-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.top-page .product-copy{grid-column:span 5;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.top-page .product-title{font-size:clamp(26px,5.2vw,42px);font-weight:700;line-height:1.1;letter-spacing:-0.2px;color:var(--ink);text-wrap:balance}
.top-page .product-sub{font-size:23px;line-height:28px;max-width:30ch}
.top-page .product-copy .btn{margin-top:12px}
/* GAROO mirrors THOUZER: copy left, image right */
.top-page .product.flip .product-copy{grid-column:1 / span 5;grid-row:1}
.top-page .product.flip .product-media{grid-column:6 / span 7;grid-row:1}

/* ─── 3b. Get started ─────────────────────────────────────────── */
/* Title left, five points right as ruled rows (same rule style as News). */
.top-page .start{padding-block:var(--section)}
.top-page .start .container{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:start;
}
.top-page .start-aside{grid-column:span 4;position:sticky;top:104px} /* 72px header + 32px */
.top-page .start-title{
  font-size:clamp(26px,5.2vw,42px);font-weight:700;line-height:1.1;letter-spacing:-0.2px;text-wrap:balance;
}
/* Photo has a white backdrop: multiply blends it into the surface colour.
   Crop trims the empty top and the corner watermark. */
.top-page .start-photo{margin:32px 0 0}
.top-page .start-photo img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 3;
  object-fit:cover;object-position:center 65%;mix-blend-mode:multiply;
}
.top-page .start-list{grid-column:5 / span 8;margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.top-page .start-list li{
  display:grid;grid-template-columns:3em 1fr;gap:16px;
  padding:32px 4px;border-bottom:1px solid var(--divider);
}
/* page.css adds a counter to every "ol li:before". The number is in .num. */
.top-page .start-list li::before{content:none;display:none}
/* Title = headline-lg, number = label-sm, h3 = headline-md, p = body-md (fluid) */
.top-page .start-list .num{
  font-size:16px;font-weight:400;line-height:16px;letter-spacing:0.02em;color:var(--green-a);
  font-variant-numeric:tabular-nums;padding-top:6px;
}
.top-page .start-list h3{margin:0 0 10px;font-size:clamp(21px,3.25vw,26px);font-weight:700;line-height:1.1;letter-spacing:0;color:var(--ink)}
.top-page .start-list p{font-size:clamp(17px,2.6vw,21px);font-weight:400;line-height:24px;max-width:60ch}

/* ─── 4. News and Exhibition ──────────────────────────────────── */
.top-page .updates{padding-block:var(--section)}
.top-page .updates .container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
.top-page .updates-col{display:flex;flex-direction:column;align-items:flex-start}
.top-page .updates-title{font-size:clamp(21px,3.25vw,26px);font-weight:700;line-height:1.1;color:var(--ink);margin-bottom:12px}
.top-page .updates-list{width:100%;border-top:2px solid var(--ink);margin-bottom:24px}
.top-page .updates-list li{border-bottom:1px solid var(--divider)}
.top-page .updates-list a{
  display:grid;grid-template-columns:7.5em 1fr;gap:16px;align-items:baseline;
  min-height:48px;padding:14px 4px;color:var(--ink);text-decoration:none;
  background-image:linear-gradient(90deg,var(--green),var(--green-bright));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size var(--motion-base) var(--ease-precision);
}
.top-page .updates-list a:hover{background-size:100% 2px}
.top-page .updates-list time{
  font-size:16px;line-height:1.4;letter-spacing:0.02em;color:var(--muted-a);
  font-variant-numeric:tabular-nums;
}
.top-page .updates-list .t{font-size:18px;line-height:1.45;font-weight:500}

/* ─── Breakpoints (structure only) ────────────────────────────── */
@media (max-width:1024px){
  .top-page{--gutter:24px;--section:80px}
  .top-page .product-media,
  .top-page .product.flip .product-media{grid-column:span 12;grid-row:auto;order:-1}
  .top-page .product-copy,
  .top-page .product.flip .product-copy{grid-column:span 12;grid-row:auto}
  .top-page .product-sub{max-width:40ch}
  .top-page .why-copy,.top-page .why-stats{grid-column:span 12}
  /* Content is full width here, so the photo spans the full width too */
  .top-page .why::before{width:100%;background-position:center center}
  .top-page .why .container{row-gap:48px}
  .top-page .start-aside{grid-column:span 12;position:static}
  .top-page .start-photo{max-width:560px}
  .top-page .start-list{grid-column:span 12}
}
@media (max-width:768px){
  .top-page .why-stats{gap:16px}
  .top-page .why-stats li{min-height:200px;padding:32px 24px}
  .top-page .updates .container{grid-template-columns:1fr;gap:56px}
}
@media (max-width:640px){
  .top-page{--gutter:16px;--section:64px}
  /* Live under 640px: phone illustration, cover, anchored bottom */
  .top-page .hero{background:#069A44}
  .top-page .hero-bg img{top:0;left:0;transform:none;width:100%;height:100%;object-fit:cover;object-position:center bottom}
  .top-page .hero .container{padding-block:110px 64px}
  .top-page .hero-sub{font-size:19px;align-items:center}
  .top-page .hero-copy{justify-self:center;align-items:center;text-align:center}
  .top-page .btn,.top-page .btn-tertiary{font-size:19px}
  .top-page .product-sub{font-size:21px;line-height:26px}
  .top-page .why-stats{grid-template-columns:1fr}
  .top-page .why-stats li:first-child{grid-column:auto}
  .top-page .why-stats li{min-height:0}
  .top-page .updates-list a{grid-template-columns:1fr;gap:2px}
  .top-page .updates-list .t{font-size:17px}
  .top-page .start-list li{grid-template-columns:1fr;gap:4px;padding-block:24px}
  .top-page .start-list .num{padding-top:0}
}

/* ─── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .top-page .hero-bg,.top-page .hero-title,.top-page .hero-sub,
  .top-page .why-stats li:nth-child(3)::before{animation:none}
  .top-page .tile-slides img{transition:none}
  .top-page .why-title::before{transform:none;transition:none}
  .top-page .btn,.top-page .btn svg,.top-page .btn-tertiary,.top-page .btn-tertiary svg,
  .top-page .updates-list a{transition:none}
  .top-page .btn:hover svg,.top-page .btn-tertiary:hover svg{transform:none}
  .top-page .btn:active{transform:none}
}