/* Last Time I… — minimal, responsive static site */
:root{
  --bg-1: #cfeff3;
  --bg-2: #0d7489;
  --ink: #062a31;
  --sub: #0a5564;
  --card: rgba(255,255,255,0.8);
  --ring: rgba(255,255,255,0.35);
  --btn: #0d7489;
  --btn-ink: #ffffff;
  --link: #0c6d80;
  --link-hover: #094f5c;
  --shadow: 0 10px 30px rgba(0,0,0,0.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}
.container{width: min(1100px, 92%); margin: 0 auto;}
.site-header{
  position: sticky; top:0; backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.35));
  border-bottom: 1px solid rgba(255,255,255,0.25);
  z-index: 10;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand img{width:32px; height:32px; border-radius:8px; box-shadow: var(--shadow)}
.brand .name{font-weight:700; letter-spacing:.2px}
.nav a{color: var(--link); text-decoration:none; margin-left:18px; font-weight:600}
.nav a:hover{color: var(--link-hover)}

.hero{
  padding: 72px 0 42px;
  text-align:center;
  color: var(--ink);
}
.hero h1{
  font-size: clamp(36px, 5vw, 56px);
  line-height:1.05; margin: 8px 0 10px;
}
.hero p{font-size: clamp(18px, 2.1vw, 22px); opacity: .9; margin: 0 auto 26px; max-width: 680px;}
.actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 14px; text-decoration:none;
  background: var(--btn); color: var(--btn-ink); font-weight:700;
  box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.35);
}
.btn:hover{filter:brightness(1.05)}
.meta{font-size: 14px; opacity: .9; margin-top: 8px}

.features{display:grid; grid-template-columns: repeat(12, 1fr); gap:20px; margin: 36px 0 64px;}
.card{
  grid-column: span 6;
  background: var(--card);
  border-radius: 18px; padding: 20px; box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.65);
}
.card h3{margin:0 0 6px}
.card p{margin:0; color: var(--sub)}

@media (max-width: 820px){
  .card{grid-column: span 12;}
}

@media (max-width: 900px){ }

.site-footer{
  margin-top:auto; padding: 28px 0; color: rgba(255,255,255,0.95);
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.18));
  border-top: 1px solid rgba(255,255,255,0.35);
}
.site-footer a{ color: #fff; text-decoration: none; opacity: .95 }
.site-footer a:hover{ text-decoration: underline }

/* Article styles (Privacy) */
.prose{
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 18px; padding: 26px; box-shadow: var(--shadow);
  margin: 24px 0 64px;
}
.prose h1{margin-top:0}
.prose h2{margin-top: 28px}
.prose p, .prose li{color:#113c45; line-height: 1.6}
.prose ul{padding-left: 20px}
.prose blockquote{
  margin: 0; padding: 12px 16px;
  background: rgba(13,116,137,0.08); border-left: 4px solid var(--link); border-radius: 6px;
}

/* --- Whimsical animations & hero icon rounding --- */
.hero img{
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.75);
  animation: float 6s ease-in-out infinite;
}

/* Subtle animated gradient drift */
body{
  background-size: 200% 200%;
  animation: bgMove 18s ease-in-out infinite;
}

/* Decorative glow behind hero */
.hero::before{
  content:"";
  position:absolute;
  left:50%; transform: translateX(-50%);
  width: 240px; height: 240px;
  margin-top: -16px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);
  filter: blur(6px);
  border-radius: 50%;
  opacity: .55;
  animation: pulse 4.5s ease-in-out infinite;
}
.hero{ position: relative; }

/* Cards float on hover (no JS) */
.card{
  transition: transform .35s ease, box-shadow .35s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
}

/* Frames gently bob to feel alive */
/* Keyframes */
@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }
50%{ transform: translateY(-10px) } }
@keyframes pulse{ 0%,100%{ opacity:.35; transform: translateX(-50%) scale(0.96) } 50%{ opacity:.65; transform: translateX(-50%) scale(1.04) } }
50%{ background-position: 100% 50% } }
@keyframes bgMove{ 0%,100%{ background-position: 50% 0% } 50%{ background-position: 50% 100% } }

/* --- Extra whimsical animations (CSS-only) --- */

/* Floating orbs in the background */
body::before, body::after{
  content:"";
  position: fixed; inset: -10% -10% auto auto;
  width: 48vmin; height: 48vmin; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%);
  filter: blur(12px);
  pointer-events: none; z-index: 0;
  animation: orbMove 22s ease-in-out infinite;
}
body::after{
  inset: auto auto -10% -10%;
  width: 42vmin; height: 42vmin;
  animation-duration: 28s;
  animation-delay: 2.2s;
}

/* Spinning dashed ring around hero */
.hero::after{
  content:"";
  position:absolute; left:50%; transform: translateX(-50%);
  top: 38px;
  width: 280px; height: 280px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0.0) 0 25%, rgba(255,255,255,0.6) 25% 35%, rgba(255,255,255,0.0) 35% 60%, rgba(255,255,255,0.6) 60% 70%, rgba(255,255,255,0.0) 70% 100%);
  mask: radial-gradient(circle, transparent 58%, black 60%);
  opacity: .8;
  animation: spin 14s linear infinite;
  pointer-events: none;
}

/* Nav underline slide */
.nav a{ position: relative; }
.nav a::after{
  content:""; position:absolute; left: 12%; right: 12%; bottom: -6px; height: 2px;
  background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .35s ease;
}
.nav a:hover::after{ transform: scaleX(1); }

/* Card tilt */
.card{ transform-origin: center top; }
.card:hover{ transform: translateY(-8px) rotateZ(-0.6deg); }

/* 3D tilt on gallery frames */
.container{ perspective: 1000px; }
.frame:hover{ transform: translateY(-10px) rotateX(5deg) rotateY(-5deg); box-shadow: 0 18px 50px rgba(0,0,0,0.22); }

/* Staggered reveal on load */
.card, .card:nth-child(1){ animation-delay: .12s }
.card:nth-child(2){ animation-delay: .22s }
.card:nth-child(3){ animation-delay: .32s }
.card:nth-child(4){ animation-delay: .42s }
.frame:nth-child(1){ animation-delay: .55s }
.frame:nth-child(2){ animation-delay: .65s }
.frame:nth-child(3){ animation-delay: .75s }
.frame:nth-child(4){ animation-delay: .85s }

/* Button sparkles */
.btn{ position: relative; overflow: hidden; }
/* Keyframes for new effects */
@keyframes orbMove{
  0%{ transform: translate(0,0) }
  50%{ transform: translate(-6vw, 5vh) }
  100%{ transform: translate(0,0) }
}
@keyframes spin{ to{ transform: translateX(-50%) rotate(360deg) } }
@keyframes riseIn{
  from{ transform: translateY(18px); opacity: 0 }
  to{ transform: translateY(0); opacity: 1 }
}
@keyframes sparkle{
  0%{ transform: rotate(25deg) translateX(-120%) }
  45%{ transform: rotate(25deg) translateX(220%) }
  100%{ transform: rotate(25deg) translateX(220%) }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}

/* --- Classy, dialed-up animations (CSS-only) --- */

/* Nav underline slide on hover */
.nav a{
  position: relative;
  padding-bottom: 4px;
}
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  opacity:.85;
}
.nav a:hover::after{ transform: scaleX(1); }

/* Subtle tilt on cards */
.card{ transform-style: preserve-3d; }
.card:hover{ transform: translateY(-6px) scale(1.01) rotateX(.6deg) rotateY(.6deg); }

/* Animated accent border on .prose (privacy) */
.prose{
  position: relative;
  overflow: hidden;
}
.prose::after{
  content:"";
  position:absolute; inset: -2px;
  background: conic-gradient(from 0deg, rgba(255,255,255,0.25), rgba(255,255,255,0), rgba(255,255,255,0.25));
  filter: blur(8px);
  z-index:-1; border-radius: 20px;
  animation: spinring 12s linear infinite;
  pointer-events:none;
}

/* Slight parallax on hero on hover */
.hero{ perspective: 900px; }
.hero img:hover{ transform: translateY(-10px) rotateX(4deg) rotateY(-4deg); }

/* Frame delays for staggered motion */
.gallery .frame:nth-child(1){ animation-delay: .2s; }
.gallery .frame:nth-child(2){ animation-delay: .8s; }
.gallery .frame:nth-child(3){ animation-delay: 1.4s; }
.gallery .frame:nth-child(4){ animation-delay: 2.0s; }

/* Button press feedback */
.btn:active{ transform: translateY(1px) scale(.995); }

/* Hero sparkles (classy, soft) */
.hero::after{
  content:"";
  position:absolute; left:50%; top: 12%;
  width: 360px; height: 220px; transform: translateX(-50%);
  background:
    radial-gradient(6px 6px at 20% 30%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(4px 4px at 70% 40%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(5px 5px at 45% 75%, rgba(255,255,255,0.45), transparent 60%);
  filter: blur(.3px);
  animation: sparkle 9s ease-in-out infinite;
  pointer-events:none;
}

/* Focus-visible ring */
a:focus-visible, button:focus-visible{
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.2);
  transition: box-shadow .2s ease;
}

/* New keyframes */
@keyframes spinring{ to{ transform: rotate(360deg) } }
@keyframes sparkle{
  0%,100%{ opacity:.35; transform: translateX(-50%) translateY(0) scale(1) }
  50%{ opacity:.8; transform: translateX(-50%) translateY(6px) scale(1.04) }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Dark mode respect */
@media (prefers-color-scheme: dark){
  :root{
    --bg-1:#0a2f36; --bg-2:#051e23; --ink:#eaf8fb; --sub:#c3e0e6;
    --card: rgba(0,0,0,0.35); --ring: rgba(255,255,255,0.2);
    --btn:#0d7489; --btn-ink:#ffffff; --link:#7fd3e2; --link-hover:#a2ebf4;
  }
  .brand img{box-shadow: none}
}

/* --- Enhanced classy animations --- */

/* Slightly stronger float and pulse */
@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }
50%{ transform: translateY(-6px) } }
@keyframes pulse{ 0%,100%{ opacity:.30; transform: translateX(-50%) scale(0.94) } 50%{ opacity:.75; transform: translateX(-50%) scale(1.06) } }
@keyframes bgMove{ 0%,100%{ background-position: 50% 0% } 50%{ background-position: 50% 100% } }

/* Nav link underline grow */
.nav a{
  position: relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: currentColor; transform: scaleX(0); transform-origin:left;
  transition: transform .35s ease;
  opacity: .7;
}
.nav a:hover::after, .nav a:focus-visible::after{ transform: scaleX(1); }

/* Button press & shine */
.btn{ transition: transform .1s ease; }
.btn:active{ transform: translateY(1px) scale(0.99); }
.btn{ position:relative; overflow:hidden; }
85%{ transform: translateX(120%)} 100%{ transform: translateX(120%)} }

/* Card tilt and subtle parallax on hover */
.card:hover{ transform: translateY(-6px) rotate(-0.4deg); }

/* Gallery frames alternate bob + tilt */
/* Focus ring animation */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.7), 0 0 0 6px rgba(13,116,137,0.45);
  transition: box-shadow .2s ease;
  border-radius: 10px;
}

/* Reduce motion: tone it all down */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* --- Disable CTA button animations per user request --- */
.btn{ background: var(--btn) !important; background-image: none !important; animation: none !important; }


/* --- Privacy page: disable animations & boost contrast --- */
.privacy-page, .privacy-page *{ animation: none !important; transition: none !important; }

/* High-contrast content on privacy page */
.privacy-page .prose{
  background: #ffffff;
  color: #0b2328;
  border-color: rgba(0,0,0,0.18);
}
.privacy-page .prose p, 
.privacy-page .prose li{ color: #0b2328; }
.privacy-page .prose h1, 
.privacy-page .prose h2{ color: #031a1f; }
.privacy-page .prose a{ color: #0a5564; text-decoration: underline; }
.privacy-page .prose blockquote{
  background: rgba(13,116,137,0.08);
  border-left-color: #0a5564;
}

@media (prefers-color-scheme: dark){
  .privacy-page .prose{
    background: #0b1b1f;
    color: #eaf8fb;
    border-color: rgba(255,255,255,0.16);
  }
  .privacy-page .prose p, 
  .privacy-page .prose li{ color: #eaf8fb; }
  .privacy-page .prose h1, 
  .privacy-page .prose h2{ color: #ffffff; }
  .privacy-page .prose a{ color: #a2ebf4; }
  .privacy-page .prose blockquote{
    background: rgba(255,255,255,0.08);
    border-left-color: #7fd3e2;
  }
}