/*
Theme Name: Pause With SK
Theme URI: https://pausewithsk.com
Author: Sahil Kapoor
Author URI: https://www.instagram.com/pausewithsk
Description: A premium emotional wellness landing theme for Pause With SK — calm dusk-meditation palette, layered parallax nature hero (mountains, river, pines, mist, birds) with breathing rings, 3D tilt service cards, and a session enquiry form.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pause-with-sk
Tags: one-column, custom-colors, wellness, landing-page
*/

:root{
  /* Dusk-meditation palette: deep pine ink, pale sage air,
     muted moss, warm copper ember, soft gold halo */
  --ink:#141f1a;
  --ink-2:#1c2b24;
  --ink-soft:#41524a;
  --mist:#eef1ea;
  --mist-deep:#e3e8dd;
  --moss:#7a8d7e;
  --ember:#c08157;
  --gold:#d8b98c;
  --line:rgba(20,31,26,.12);
  --radius:20px;
  --shadow-soft:0 24px 60px -28px rgba(20,31,26,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Karla',sans-serif;font-weight:300;
  background:var(--mist);color:var(--ink);
  line-height:1.75;font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,blockquote{font-family:'Fraunces',serif;font-weight:400;line-height:1.2}
a{color:inherit}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--moss);font-weight:600;margin-bottom:18px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* WP admin bar offset */
body.admin-bar .pwsk-nav{top:32px}
@media(max-width:782px){body.admin-bar .pwsk-nav{top:46px}}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}

/* ---------- nav ---------- */
.pwsk-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 32px;transition:background .4s,box-shadow .4s,top .3s;
}
.pwsk-nav.scrolled{background:rgba(238,241,234,.86);backdrop-filter:blur(14px);box-shadow:0 6px 30px -18px rgba(20,31,26,.3)}
.logo{font-family:'Fraunces',serif;font-size:20px;letter-spacing:.04em;text-decoration:none}
.logo span{color:var(--ember)}
.pwsk-nav ul{display:flex;gap:30px;list-style:none}
.pwsk-nav ul a{
  text-decoration:none;font-size:14px;letter-spacing:.06em;color:var(--ink-soft);
  position:relative;padding:4px 0;transition:color .25s;
}
.pwsk-nav ul a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ember);transform:scaleX(0);transform-origin:right;transition:transform .35s ease;
}
.pwsk-nav ul a:hover{color:var(--ink)}
.pwsk-nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:720px){.pwsk-nav ul{display:none}}

/* ---------- hero (layered parallax) ---------- */
.hero{
  min-height:100vh;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(1100px 650px at 78% -10%, rgba(216,185,140,.22), transparent 60%),
    radial-gradient(1200px 760px at 20% 115%, rgba(122,141,126,.30), transparent 62%),
    var(--mist);
  perspective:1000px;
}
.layer{position:absolute;inset:0;will-change:transform;pointer-events:none}
.breath{
  position:absolute;top:50%;left:50%;border-radius:50%;
  translate:-50% -50%;
  border:1px solid rgba(122,141,126,.5);
  animation:breathe 9s ease-in-out infinite;
}
.b1{width:560px;height:560px}
.b2{width:400px;height:400px;border-color:rgba(122,141,126,.32);animation-delay:-1.5s}
.b3{width:740px;height:740px;border-color:rgba(122,141,126,.18);animation-delay:-3s}
@keyframes breathe{0%,100%{scale:.92;opacity:.55}50%{scale:1.06;opacity:1}}
.orb{
  position:absolute;border-radius:50%;
  filter:blur(2px);
  animation:drift 14s ease-in-out infinite alternate;
}
.orb.o1{width:140px;height:140px;top:16%;left:12%;
  background:radial-gradient(circle at 32% 30%, rgba(216,185,140,.85), rgba(216,185,140,.12) 70%);}
.orb.o2{width:90px;height:90px;bottom:20%;right:14%;
  background:radial-gradient(circle at 32% 30%, rgba(192,129,87,.6), rgba(192,129,87,.08) 70%);
  animation-delay:-5s}
.orb.o3{width:54px;height:54px;top:30%;right:24%;
  background:radial-gradient(circle at 32% 30%, rgba(122,141,126,.7), rgba(122,141,126,.08) 70%);
  animation-delay:-9s}
@keyframes drift{from{transform:translateY(-14px)}to{transform:translateY(16px)}}

/* ---------- hero nature scene ---------- */
.scene-art{position:absolute;bottom:-2px;left:-7%;width:114%;height:auto;display:block}
@media(max-width:720px){.scene-art{width:230%;left:-65%}}
.hero .tree use,.treeline .tree use{
  transform-box:fill-box;transform-origin:50% 100%;
  animation:pwskSway 6.5s ease-in-out infinite alternate;
}
.hero .tree:nth-of-type(2n) use,.treeline .tree:nth-of-type(2n) use{animation-delay:-3.2s}
.hero .tree:nth-of-type(3n) use,.treeline .tree:nth-of-type(3n) use{animation-delay:-1.6s;animation-duration:8s}
@keyframes pwskSway{from{transform:rotate(-1.3deg)}to{transform:rotate(1.5deg)}}
.mist{
  position:absolute;bottom:8%;left:6%;width:46%;height:70px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(238,241,234,.85), rgba(238,241,234,0));
  filter:blur(10px);opacity:.8;
  animation:mistDrift 22s ease-in-out infinite alternate;
}
.mist.m2{left:auto;right:4%;bottom:13%;width:34%;height:52px;opacity:.55;animation-delay:-11s}
@keyframes mistDrift{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
.bird{position:absolute;width:26px;height:auto;animation:fly 34s linear infinite}
.bird-1{top:20%}
.bird-2{top:14%;width:18px;animation-duration:46s;animation-delay:-18s}
.bird-3{top:26%;width:21px;animation-duration:40s;animation-delay:-30s}
@keyframes fly{
  0%{transform:translateX(-6vw) translateY(0)}
  50%{transform:translateX(52vw) translateY(-34px)}
  100%{transform:translateX(112vw) translateY(0)}
}

.hero-inner{position:relative;z-index:5;padding:0 24px 8vh;max-width:780px}
.hero h1{font-size:clamp(46px,8vw,86px);font-weight:300;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--ember)}
.hero p{margin:26px auto 0;max-width:540px;color:var(--ink-soft);font-size:18px}
.btn{
  display:inline-block;margin-top:38px;padding:16px 40px;border-radius:999px;
  background:linear-gradient(160deg, var(--ink-2), var(--ink));color:var(--mist);
  text-decoration:none;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  box-shadow:0 14px 30px -14px rgba(20,31,26,.55), inset 0 1px 0 rgba(238,241,234,.14);
  transition:transform .3s,box-shadow .3s,background .3s;
}
.btn:hover{
  transform:translateY(-3px) scale(1.02);
  background:linear-gradient(160deg,#cd9066,var(--ember));
  box-shadow:0 22px 44px -16px rgba(192,129,87,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(238,241,234,.8);z-index:5}

/* ---------- sections ---------- */
.pwsk-section{padding:110px 0;position:relative}
.section-head{max-width:640px;margin-bottom:56px}
.section-head h2{font-size:clamp(30px,4.5vw,44px);font-weight:300}

/* about — dark band with parallax glow */
.about{
  background:
    radial-gradient(900px 480px at 85% 10%, rgba(216,185,140,.12), transparent 60%),
    linear-gradient(165deg, var(--ink-2), var(--ink));
  color:var(--mist);overflow:hidden;
}
.about .glow{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(192,129,87,.18), transparent 65%);
  top:-160px;right:-120px;will-change:transform;pointer-events:none;
}
.about .eyebrow{color:var(--gold)}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;position:relative;z-index:2}
.about h2{font-size:clamp(30px,4.5vw,44px);font-weight:300;margin-bottom:26px}
.about p{color:rgba(238,241,234,.78);margin-bottom:18px}
.about-quote{
  border-left:2px solid var(--ember);padding:8px 0 8px 26px;
  font-family:'Fraunces',serif;font-size:23px;font-style:italic;line-height:1.5;color:var(--mist);
  background:linear-gradient(90deg, rgba(192,129,87,.10), transparent 70%);
  border-radius:0 var(--radius) var(--radius) 0;
}
@media(max-width:840px){.about-grid{grid-template-columns:1fr;gap:40px}}

/* services — 3D tilt cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1200px}
@media(max-width:840px){.cards{grid-template-columns:1fr}}
.card{
  position:relative;background:linear-gradient(170deg,#ffffff,#f6f8f2);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:42px 32px;transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow .4s ease;
  box-shadow:0 10px 26px -18px rgba(20,31,26,.28);
}
.card:hover{box-shadow:var(--shadow-soft)}
.card::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(216,185,140,.22), transparent 55%);
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.card:hover::after{opacity:1}
.card .glyph{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;color:#fff;font-size:20px;
  background:linear-gradient(150deg, var(--moss), #5d7263);
  box-shadow:0 10px 20px -10px rgba(122,141,126,.7), inset 0 1px 0 rgba(255,255,255,.35);
  transform:translateZ(38px);
}
.card:nth-child(2) .glyph{background:linear-gradient(150deg, var(--ember), #a96b46);box-shadow:0 10px 20px -10px rgba(192,129,87,.7), inset 0 1px 0 rgba(255,255,255,.35)}
.card:nth-child(3) .glyph{background:linear-gradient(150deg, var(--gold), #b99467);box-shadow:0 10px 20px -10px rgba(216,185,140,.8), inset 0 1px 0 rgba(255,255,255,.4)}
.card h3{font-size:22px;margin-bottom:12px;font-weight:400;transform:translateZ(26px)}
.card p{color:var(--ink-soft);font-size:16px;transform:translateZ(16px)}

/* testimonials */
.testimonials{background:var(--mist-deep)}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:26px;perspective:1200px}
@media(max-width:840px){.quotes{grid-template-columns:1fr}}
.quotes blockquote{
  background:#fff;border-radius:var(--radius);padding:42px;
  font-size:21px;font-style:italic;font-weight:300;line-height:1.55;position:relative;
  border:1px solid var(--line);
  box-shadow:0 10px 26px -18px rgba(20,31,26,.25);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s;
}
.quotes blockquote:hover{transform:translateY(-8px) rotateX(2.5deg);box-shadow:var(--shadow-soft)}
.quotes blockquote::before{
  content:"\201C";position:absolute;top:12px;left:22px;font-size:66px;
  color:var(--ember);opacity:.3;font-style:normal;
}
.quotes cite{display:block;margin-top:20px;font-family:'Karla',sans-serif;font-style:normal;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--moss)}

/* instagram */
.insta{text-align:center;overflow:hidden;position:relative;padding-bottom:230px}
.treeline{position:absolute;left:0;right:0;bottom:-1px;pointer-events:none}
.treeline svg{display:block;width:100%;height:auto}
@media(max-width:720px){.treeline svg{width:180%;margin-left:-40%}}
.insta h2{font-size:clamp(28px,4vw,40px);font-weight:300;margin-bottom:14px}
.insta p{color:var(--ink-soft);max-width:480px;margin:0 auto 30px}
.insta a.handle{
  display:inline-block;font-family:'Fraunces',serif;font-size:24px;font-style:italic;
  color:var(--ember);text-decoration:none;padding:14px 34px;border:1px solid rgba(192,129,87,.45);
  border-radius:999px;transition:transform .3s, background .3s, color .3s, box-shadow .3s;
}
.insta a.handle:hover{
  background:var(--ember);color:#fff;transform:translateY(-3px);
  box-shadow:0 18px 36px -14px rgba(192,129,87,.65);
}

/* contact */
.contact{
  background:
    radial-gradient(800px 460px at 12% 0%, rgba(122,141,126,.16), transparent 60%),
    linear-gradient(165deg, var(--ink), var(--ink-2));
  color:var(--mist);
}
.contact .eyebrow{color:var(--gold)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
@media(max-width:840px){.contact-grid{grid-template-columns:1fr}}
.contact h2{font-size:clamp(30px,4.5vw,44px);font-weight:300;margin-bottom:22px}
.contact .lead{color:rgba(238,241,234,.78)}
.contact .email{margin-top:26px;font-size:15px;color:rgba(238,241,234,.65)}
.contact .email a{color:var(--gold);text-decoration:none}
.contact form{
  display:flex;flex-direction:column;gap:16px;
  background:rgba(238,241,234,.05);border:1px solid rgba(238,241,234,.14);
  padding:34px;border-radius:var(--radius);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(238,241,234,.08);
  backdrop-filter:blur(6px);
}
.contact label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,241,234,.6)}
.contact input,.contact textarea{
  padding:16px 18px;border-radius:12px;border:1px solid rgba(238,241,234,.22);
  background:rgba(238,241,234,.06);color:var(--mist);
  font-family:'Karla',sans-serif;font-size:16px;transition:border .25s, background .25s;
}
.contact input:hover,.contact textarea:hover{background:rgba(238,241,234,.09)}
.contact input:focus,.contact textarea:focus{outline:2px solid var(--ember);outline-offset:2px;border-color:var(--ember)}
.contact textarea{min-height:130px;resize:vertical}
.contact form button{
  margin-top:8px;padding:16px;border:none;border-radius:999px;cursor:pointer;
  background:linear-gradient(150deg,#cd9066,var(--ember));color:#fff;
  font-family:'Karla',sans-serif;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  box-shadow:0 14px 28px -12px rgba(192,129,87,.6), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .3s, box-shadow .3s, filter .3s;
}
.contact form button:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 20px 40px -14px rgba(192,129,87,.7)}

/* footer */
.pwsk-footer{padding:64px 24px;text-align:center}
.pwsk-footer .pause-quote{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(20px,3vw,26px);max-width:560px;margin:0 auto 26px;color:var(--ink-soft);line-height:1.5}
.pwsk-footer .fine{font-size:13px;letter-spacing:.1em;color:var(--moss)}
.pwsk-footer .fine a{text-decoration:none;color:var(--ember)}

/* fallback content styles for blog pages */
.pwsk-content{max-width:760px;margin:0 auto;padding:160px 24px 80px}
.pwsk-content h1{font-size:clamp(32px,5vw,52px);margin-bottom:24px;font-weight:300}
.pwsk-content p{margin-bottom:18px}

@media(prefers-reduced-motion:reduce){
  .breath,.orb,.mist,.bird,.hero .tree use,.treeline .tree use{animation:none}
  .river-shine{display:none}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .layer,.about .glow{transform:none !important}
  .card{transform:none !important}
}