/* ==========================================================================
   Front-page-only: hero (logo left / hero article right), the header's
   hidden-until-scroll behavior, and the custom cursor (magnifier lens +
   splash / wakame / fish click actions). Enqueued only when is_front_page().
   ========================================================================== */

/* ---------- first view: logo left / hero article right ---------- */
/* min-height keeps the site-header (which sits right after this section)
   below the fold, so the first view is logo+hero only, no nav bar */
.hero-view{
  position:relative;
  display:grid; grid-template-columns:1fr 1.9fr; gap:42px; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:40px 40px;
  min-height:100vh; box-sizing:border-box;
}

/* launch badge: 大漁旗-style flag + scrolling marquee ribbon, pinned to the
   top-left corner of the first view */
.launch-badge{
  position:absolute; top:20px; left:20px; z-index:5;
  width:100px; pointer-events:none;
}
.launch-flag{ display:block; width:100%; height:auto; filter:drop-shadow(2px 3px 4px rgba(0,0,0,0.18)); position:relative; z-index:1; }
/* the hull: a plain rectangle (widened 140%, centered) that the flag's
   mast/pole plants into, like a small flag mounted on a boat */
.launch-marquee{
  overflow:hidden; background:var(--ink); border:2px solid var(--ink);
  padding:5px 10px; position:relative; z-index:2; margin-top:-6px;
  width:140%; left:50%; transform:translateX(-50%);
}
.launch-marquee .track{
  display:flex; width:max-content; animation:launch-marquee-scroll 9s linear infinite;
}
.launch-marquee .track span{
  font-family:'Spline Sans Mono',monospace; font-weight:700; font-size:10px;
  letter-spacing:0.02em; color:var(--lime); white-space:nowrap; padding-right:20px;
}
@keyframes launch-marquee-scroll{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .launch-marquee .track{ animation:none; }
}

@media (max-width:860px){
  .launch-badge{ width:76px; top:14px; left:14px; }
  .launch-marquee .track span{ font-size:8px; padding-right:14px; }
}
.hero-left{ display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center; }
.hero-left-top{ display:flex; flex-direction:column; align-items:center; }
.hero-logo-mark{ margin-bottom:24px; }
.hero-logo-title{ font-family:'Outfit',sans-serif; font-weight:600; font-size:40px; letter-spacing:0.02em; color:#2B2A28; }
.hero-logo-tag{ font-size:15px; color:#5A5750; letter-spacing:0.03em; margin-top:8px; }
.hero-left .creation-link{
  font-family:'Outfit',sans-serif; font-weight:600; font-size:13px; margin-top:32px;
  background-image:linear-gradient(transparent 60%, var(--lime) 60%, var(--lime) 92%, transparent 92%); padding:2px 4px;
}

.hero-right{ position:relative; padding-right:56px; }
.hero-card{ display:block; border:var(--border); background:var(--white); overflow:hidden; }
.hero-photo{
  aspect-ratio:16/8.6; background:linear-gradient(135deg,#cfd9dd,#aebcc2);
  display:flex; align-items:center; justify-content:center; color:rgba(21,20,15,0.35);
  font-family:'Spline Sans Mono',monospace; font-size:13px; position:relative; overflow:hidden;
}
.hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-badge{
  position:absolute; top:20px; left:20px; background:var(--teal); border:2px solid var(--ink); color:var(--ink);
  font-family:'Archivo',sans-serif; font-weight:800; font-size:13px; padding:8px 16px; z-index:1;
}
.hero-text{ padding:28px 32px 32px; }
.hero-text h1{
  font-family:'Archivo','Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:38px;
  margin:14px 0 10px; line-height:1.25;
}
.hero-text p{ font-size:14px; color:var(--ink-60); }

.hero-tabs{ position:absolute; top:0; right:0; bottom:0; width:56px; display:flex; flex-direction:column; }
.hero-tabs a{
  flex:1; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; text-orientation:mixed;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:13px; letter-spacing:0.08em;
  border:2px solid var(--ink); border-left:none; margin-bottom:-2px;
}
.hero-tabs a.teal{ background:var(--teal); }
.hero-tabs a.orange{ background:var(--orange); }
.hero-tabs a.pink{ background:var(--pink); }

/* the compact site nav takes over from here (01 FOLLOWING) onward.
   truly hidden (not just off-screen) until scrolled past the hero,
   toggled via the .revealed class in assets/js/top-cursor.js. */
.site-header{ opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.site-header.revealed{ opacity:1; pointer-events:auto; }
.section:first-of-type{ margin-top:56px; }

@media (max-width:860px){
  .hero-view{ grid-template-columns:1fr; padding:32px 20px; min-height:auto; align-items:start; }
  .hero-right{ padding-right:44px; }
  .hero-tabs{ width:44px; }
  .hero-tabs a{ font-size:11px; }
  .hero-text h1{ font-size:28px; }
}

/* ---------- top-page-only custom cursor: magnifier lens ---------- */
html.top-cursor, html.top-cursor *{ cursor:none !important; }
.magnifier{
  position:fixed; top:0; left:0; width:21px; height:21px; border-radius:50%;
  border:1.5px solid var(--ink); background:#fff; overflow:hidden;
  pointer-events:none; z-index:9999; box-shadow:1.5px 2px 4px rgba(0,0,0,0.28);
  transform:scale(1); transition:transform 0.15s cubic-bezier(.34,1.56,.64,1), opacity 0.15s ease;
  opacity:0;
}
.magnifier.active{ opacity:1; }
.magnifier.clicking{ transform:scale(0.82); }
.magnifier iframe{ position:absolute; top:0; left:0; width:100vw; height:100vh; border:none; transform-origin:0 0; }
.magnifier::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.35), inset 0 -3px 4px rgba(21,20,15,0.12);
}
.cursor-trail{
  position:fixed; top:0; left:0; border-radius:50%; background:var(--teal);
  pointer-events:none; z-index:9998; mix-blend-mode:multiply; opacity:0;
  transition:opacity 0.15s ease;
}
.cursor-trail.active{ opacity:var(--trail-o, 0.3); }

/* ---------- click action: splash / wakame / jumping fish ---------- */
.splash-drop{
  position:fixed; border-radius:50%; background:#3E7CB1;
  pointer-events:none; z-index:9997; will-change:transform,opacity;
  animation:splash-drop .55s ease-out forwards;
}
@keyframes splash-drop{
  0%   { transform:translate(-50%,-50%) scale(1); opacity:0.85; }
  100% { transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity:0; }
}
.splash-ring{
  position:fixed; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%;
  border:3px solid #3E7CB1; pointer-events:none; z-index:9996;
  animation:splash-ring .5s ease-out forwards;
}
@keyframes splash-ring{
  0%   { transform:scale(0.4); opacity:0.6; }
  100% { transform:scale(3.2); opacity:0; }
}
.wakame-pop{
  position:fixed; pointer-events:none; z-index:9997; transform-origin:50% 100%;
  animation:wakame-pop .9s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes wakame-pop{
  0%   { transform:translate(-50%,0%) scale(0) rotate(-8deg); opacity:0; }
  28%  { transform:translate(-50%,-60%) scale(1.15) rotate(6deg); opacity:1; }
  55%  { transform:translate(-50%,-72%) scale(0.95) rotate(-4deg); opacity:1; }
  100% { transform:translate(-50%,-115%) scale(0.9) rotate(3deg); opacity:0; }
}
.fish-jump{
  position:fixed; pointer-events:none; z-index:9997;
  animation:fish-jump 0.85s cubic-bezier(.34,1.2,.4,1) forwards;
}
@keyframes fish-jump{
  0%   { transform:translate(-50%,0%) translateY(0) rotate(0deg) scale(0.6); opacity:0; }
  12%  { opacity:1; }
  50%  { transform:translate(-50%,0%) translateY(-78px) rotate(var(--frot,-18deg)) scale(1); opacity:1; }
  88%  { opacity:1; }
  100% { transform:translate(calc(-50% + var(--fx,0px)),0%) translateY(6px) rotate(calc(var(--frot,-18deg) * -1)) scale(0.55); opacity:0; }
}