/* =========================================================
   Intro: the Behance "PORTFOLIO" cover, recreated in code.
   Ring zooms out of the islands -> islands burst to the corners ->
   ring becomes the O, compass spins in -> letters fly in -> title.
   Shown once per session (see the inline script in <head>);
   click, key, scroll or "Skip intro" ends it early.
   ========================================================= */

.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: 200; overflow: hidden; cursor: pointer;
  background-color: #FFF8D6;
  background-image: radial-gradient(rgba(47, 138, 59, .07) 1px, transparent 1.4px);
  background-size: 22px 22px;
  animation: intro-failsafe .01s linear 10s forwards;   /* never trap the page if the script fails */
  transition: opacity .7s ease, transform .7s ease;
}
@keyframes intro-failsafe { to { visibility: hidden; pointer-events: none; } }
.intro.out { opacity: 0; transform: scale(1.05); pointer-events: none; }
.intro:not(.play) .intro-stage, .intro:not(.play) .intro-isle { visibility: hidden; }

/* ---------- islands ---------- */
.intro-isle {
  position: absolute; z-index: 1; width: clamp(200px, 36vw, 62vh); aspect-ratio: 1.2;
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
  background: radial-gradient(circle at 34% 30%, #8BD266 0%, #48A64B 42%, #2A7A35 100%);
  box-shadow: inset -18px -24px 44px rgba(10, 50, 20, .3);
  filter: blur(3px);
}
.intro-isle::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: radial-gradient(rgba(255, 255, 255, .24) 1.1px, transparent 1.7px); background-size: 7px 7px;
}
/* --sx/--sy pull each island from its corner into a clover-shaped cluster at the centre */
.i1 { left: -10vw; top: -15vh; --sx: 37vw; --sy: 33vh; --sr: -30deg; }
.i2 { right: -11vw; top: -19vh; --sx: -36vw; --sy: 36vh; --sr: 24deg; border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; }
.i3 { left: -13vw; bottom: -13vh; --sx: 39vw; --sy: -30vh; --sr: 18deg; border-radius: 52% 48% 60% 40% / 42% 58% 42% 58%; }
.i4 { right: -12vw; bottom: -11vh; --sx: -38vw; --sy: -29vh; --sr: -26deg; border-radius: 60% 40% 48% 52% / 50% 45% 55% 50%; }
.play .intro-isle { animation: isle-burst .78s cubic-bezier(.18, 1.25, .35, 1) .72s both, isle-morph 9s ease-in-out 1.6s infinite alternate; }
@keyframes isle-burst {
  from { transform: translate(var(--sx), var(--sy)) scale(.5) rotate(var(--sr)); }
  to   { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes isle-morph { 50% { border-radius: 42% 58% 45% 55% / 60% 44% 56% 40%; } }

/* ---------- stage (one SVG, 1440x900 user units) ---------- */
.intro-stage { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; }
.intro-stage .rings, .intro-stage .lt, .intro-stage .compass, .intro-stage .year {
  transform-box: fill-box; transform-origin: center;
}
.intro-stage .lt { font: 700 240px "Fredoka", system-ui, sans-serif; fill: url(#intro-lg); transform: translate(0px, 0px) rotate(var(--r, 0deg)) scale(1); }
.intro-stage .year { font: 700 34px "Fredoka", system-ui, sans-serif; fill: #D9452A; transform: rotate(4deg); }
.intro-stage .sub { font: 800 30px "Montserrat", system-ui, sans-serif; letter-spacing: .6px; fill: #2F8A3B; }
.intro-stage .hint { font: 700 24px "Caveat", cursive; fill: #F07A2A; }
@media (orientation: portrait) { .intro-stage .hint { font-size: 36px; } }

/* 0 - 2.0 s: the ring frames the islands, snaps down to a small O, then grows into place */
.play .rings { animation: ring 2s both; }
@keyframes ring {
  0%   { transform: translate(138px, 54px) scale(8.2); animation-timing-function: linear; }
  35%  { transform: translate(138px, 54px) scale(7.2); animation-timing-function: cubic-bezier(.55, 0, .85, .35); }
  58%  { transform: translate(0px, 0px) scale(.42); animation-timing-function: ease-out; }
  63%  { transform: translate(0px, 0px) scale(.49); animation-timing-function: ease-in-out; }
  69%  { transform: translate(0px, 0px) scale(.42); }
  78%  { transform: translate(0px, 0px) scale(.42); animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.play .compass { animation: compass .75s cubic-bezier(.3, 1.45, .5, 1) 1.62s both; }
@keyframes compass {
  from { transform: scale(0) rotate(-220deg); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 1.2 s on: the dashed map trails draw themselves; the boat sets sail (SMIL, started from intro.js) */
.play .draw { animation: draw 1.5s ease-in-out 1.2s both; }
.play .draw.d2 { animation-delay: 1.45s; }
.play .draw.d3 { animation-delay: 1.75s; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.play .boat { animation: fade-in .4s ease-out 1.3s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 1.95 - 3.9 s: letters fly in from off-screen, one after another */
.play .lt { animation: fly .66s cubic-bezier(.2, .9, .3, 1) var(--d) both; }
@keyframes fly {
  0%   { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(1.25); opacity: 0; }
  15%  { opacity: 1; }
  72%  { transform: translate(0px, 0px) rotate(calc(var(--r) + 6deg)) scale(1.03); opacity: 1; }
  100% { transform: translate(0px, 0px) rotate(var(--r)) scale(1); opacity: 1; }
}
.play .year { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) 3.6s both; }
@keyframes pop {
  from { transform: rotate(4deg) scale(.2); opacity: 0; }
  to   { transform: rotate(4deg) scale(1); opacity: 1; }
}
.play .sub  { animation: rise .6s ease-out 3.8s both; }
.play .hint { animation: rise .6s ease-out 4.4s both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- skip button ---------- */
.intro-skip {
  position: absolute; z-index: 3; top: 18px; right: 18px; padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: #FFFDF3; color: #1E5E2A; font: 800 12px/1 "Montserrat", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 4px 0 rgba(28, 42, 30, .18);
}
.intro-skip:hover { background: #F6C343; }
.intro-skip:focus-visible { outline: 3px solid #F07A2A; outline-offset: 3px; }