Embed

<div id="tripstagram-portal-launch">
  <style>
    #tripstagram-portal-launch {
      --navy: #1b2f6e;
      --orange: #f47c20;
      --ocean: #3ab4d8;
      --white: #ffffff;
      position: relative;
      width: 100%;
      min-height: 720px;
      overflow: hidden;
      font-family: 'DM Sans', sans-serif;
      background: var(--navy);
      border-radius: 24px;
      isolation: isolate;
    }

    #tripstagram-portal-launch *,
    #tripstagram-portal-launch *::before,
    #tripstagram-portal-launch *::after {
      box-sizing: border-box;
    }

    #tripstagram-portal-launch .bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 20% 50%, #1e3a8a 0%, #1b2f6e 40%, #0f1e48 100%);
      z-index: 0;
    }

    #tripstagram-portal-launch .grain {
      position: absolute;
      inset: -200%;
      width: 400%;
      height: 400%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      opacity: 0.35;
      animation: trip-grain-shift 8s steps(2) infinite;
      pointer-events: none;
      z-index: 1;
    }

    @keyframes trip-grain-shift {
      0%   { transform: translate(0, 0); }
      20%  { transform: translate(-5%, -10%); }
      40%  { transform: translate(-15%, 5%); }
      60%  { transform: translate(7%, -15%); }
      80%  { transform: translate(-10%, 10%); }
      100% { transform: translate(0, 0); }
    }

    #tripstagram-portal-launch .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 1;
    }

    #tripstagram-portal-launch .orb-1 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(58,180,216,0.18) 0%, transparent 70%);
      top: -100px;
      right: -100px;
      animation: trip-orb-drift 12s ease-in-out infinite alternate;
    }

    #tripstagram-portal-launch .orb-2 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(244,124,32,0.12) 0%, transparent 70%);
      bottom: -80px;
      left: -80px;
      animation: trip-orb-drift 9s ease-in-out infinite alternate-reverse;
    }

    @keyframes trip-orb-drift {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(30px, 20px) scale(1.1); }
    }

    #tripstagram-portal-launch .stars {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }

    #tripstagram-portal-launch .star {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.6);
      animation: trip-twinkle var(--dur) ease-in-out infinite alternate;
      animation-delay: var(--delay);
    }

    @keyframes trip-twinkle {
      from { opacity: 0.2; transform: scale(1); }
      to   { opacity: 0.9; transform: scale(1.4); }
    }

    #tripstagram-portal-launch .card {
      position: relative;
      z-index: 2;
      min-height: 720px;
      padding: 48px 24px 84px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      animation: trip-fade-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s forwards;
    }

    @keyframes trip-fade-in {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    #tripstagram-portal-launch .logo-wrap {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 0 30px rgba(58,180,216,0.4));
      animation: trip-logo-pulse 3s ease-in-out infinite;
    }

    @keyframes trip-logo-pulse {
      0%, 100% { filter: drop-shadow(0 0 24px rgba(58,180,216,0.35)); }
      50% { filter: drop-shadow(0 0 44px rgba(58,180,216,0.6)); }
    }

    #tripstagram-portal-launch .logo-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    #tripstagram-portal-launch .brand {
      margin-top: 20px;
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 700;
      color: var(--white);
      letter-spacing: -0.5px;
      text-align: center;
      animation: trip-fade-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.4s both;
    }

    #tripstagram-portal-launch .brand span {
      color: var(--orange);
    }

    #tripstagram-portal-launch .tagline {
      margin-top: 8px;
      font-size: 0.85rem;
      font-weight: 300;
      color: rgba(255,255,255,0.5);
      letter-spacing: 2px;
      text-transform: uppercase;
      text-align: center;
      animation: trip-fade-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.6s both;
    }

    #tripstagram-portal-launch .divider {
      width: 60px;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(58,180,216,0.5), transparent);
      margin: 28px auto;
      animation: trip-fade-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.7s both;
    }

    #tripstagram-portal-launch .status-wrap {
      text-align: center;
      animation: trip-fade-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.8s both;
    }

    #tripstagram-portal-launch .status-icon {
      font-size: 1.5rem;
      margin-bottom: 10px;
      display: block;
      animation: trip-plane-fly 3s ease-in-out infinite;
    }

    @keyframes trip-plane-fly {
      0%   { transform: translateX(-8px) rotate(-5deg); opacity: 0.7; }
      50%  { transform: translateX(8px) rotate(5deg); opacity: 1; }
      100% { transform: translateX(-8px) rotate(-5deg); opacity: 0.7; }
    }

    #tripstagram-portal-launch .status-text {
      font-size: 0.95rem;
      color: rgba(255,255,255,0.8);
      font-weight: 400;
      min-height: 1.4em;
      letter-spacing: 0.3px;
      transition: opacity 0.3s ease;
    }

    #tripstagram-portal-launch .progress-wrap {
      width: min(320px, 80vw);
      margin-top: 24px;
      animation: trip-fade-in 0.9s cubic-bezier(0.22,1,0.36,1) 1s both;
    }

    #tripstagram-portal-launch .progress-track {
      width: 100%;
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 99px;
      overflow: hidden;
    }

    #tripstagram-portal-launch .progress-fill {
      height: 100%;
      width: 0%;
      border-radius: 99px;
      background: linear-gradient(to right, var(--ocean), var(--orange));
      box-shadow: 0 0 10px rgba(58,180,216,0.6);
      transition: width 0.3s ease;
    }

    #tripstagram-portal-launch .progress-label {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
    }

    #tripstagram-portal-launch .progress-label span {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.35);
      letter-spacing: 0.5px;
    }

    #tripstagram-portal-launch .destinations {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 32px;
      animation: trip-fade-in 0.9s cubic-bezier(0.22,1,0.36,1) 1.1s both;
      max-width: 720px;
    }

    #tripstagram-portal-launch .dest-pill {
      padding: 5px 14px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 99px;
      font-size: 0.72rem;
      color: rgba(255,255,255,0.4);
      letter-spacing: 0.5px;
      backdrop-filter: blur(8px);
      background: rgba(255,255,255,0.04);
      animation: trip-pill-glow 4s ease-in-out infinite;
      animation-delay: var(--pd, 0s);
    }

    @keyframes trip-pill-glow {
      0%, 100% { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.35); }
      50% { border-color: rgba(58,180,216,0.4); color: rgba(255,255,255,0.65); }
    }

    #tripstagram-portal-launch .footer-note {
      position: absolute;
      bottom: 28px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 0.72rem;
      color: rgba(255,255,255,0.2);
      letter-spacing: 0.5px;
      animation: trip-fade-in 1s ease 1.5s both;
      padding: 0 16px;
      z-index: 2;
    }

    #tripstagram-portal-launch.exiting {
      animation: trip-page-exit 0.7s cubic-bezier(0.55,0,1,0.45) forwards;
    }

    @keyframes trip-page-exit {
      from { opacity: 1; transform: scale(1); }
      to   { opacity: 0; transform: scale(1.04); }
    }

    @media (max-width: 640px) {
      #tripstagram-portal-launch {
        min-height: 680px;
      }

      #tripstagram-portal-launch .card {
        min-height: 680px;
        padding: 40px 18px 78px;
      }

      #tripstagram-portal-launch .brand {
        font-size: 2rem;
      }

      #tripstagram-portal-launch .destinations {
        gap: 8px;
      }
    }
  </style>

  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

  <div class="bg"></div>
  <div class="grain"></div>
  <div class="orb orb-1"></div>
  <div class="orb orb-2"></div>
  <div class="stars" id="trip-stars"></div>

  <div class="card">
    <div class="logo-wrap">
      <img src="https://cdn.corenexis.com/files/c/5563316720.png" alt="Tripstagram Travel Co.">
    </div>

    <h1 class="brand">Tripstagram <span>Travel Co.</span></h1>
    <p class="tagline">Real Trips &nbsp;·&nbsp; Unreal Views</p>

    <div class="divider"></div>

    <div class="status-wrap">
      <span class="status-icon">✈️</span>
      <p class="status-text" id="trip-status-text">Preparing your travel portal.</p>
    </div>

    <div class="progress-wrap">
      <div class="progress-track">
        <div class="progress-fill" id="trip-progress-fill"></div>
      </div>
      <div class="progress-label">
        <span>Tripstagram</span>
        <span id="trip-progress-pct">0%</span>
      </div>
    </div>

    <div class="destinations">
      <div class="dest-pill" style="--pd:0s">Caribbean</div>
      <div class="dest-pill" style="--pd:0.4s">Mediterranean</div>
      <div class="dest-pill" style="--pd:0.8s">Alaska</div>
      <div class="dest-pill" style="--pd:1.2s">Maldives</div>
      <div class="dest-pill" style="--pd:1.6s">Norway</div>
    </div>
  </div>

  <p class="footer-note">Secured by Tripstagram Travel Co. &nbsp;·&nbsp; tripstagramtravelco.com</p>

  <script>
    (function () {
      const root = document.getElementById('tripstagram-portal-launch');
      const starsEl = document.getElementById('trip-stars');
      const fillEl = document.getElementById('trip-progress-fill');
      const pctEl = document.getElementById('trip-progress-pct');
      const textEl = document.getElementById('trip-status-text');

      const DESTINATION = 'https://groundd.app';
      const TOTAL_MS = 3200;
      const TICK_MS = 40;

      const messages = [
        { at: 0, text: 'Preparing your travel portal.' },
        { at: 30, text: 'Loading your destinations.' },
        { at: 58, text: 'Securing your session.' },
        { at: 82, text: 'Almost there.' },
        { at: 96, text: 'Welcome aboard!' }
      ];

      for (let i = 0; i < 60; i++) {
        const s = document.createElement('div');
        s.className = 'star';
        const size = Math.random() * 2.5 + 0.5;
        s.style.cssText = `
          width:${size}px;
          height:${size}px;
          top:${Math.random() * 100}%;
          left:${Math.random() * 100}%;
          --dur:${(Math.random() * 3 + 2).toFixed(1)}s;
          --delay:${(Math.random() * 4).toFixed(1)}s;
        `;
        starsEl.appendChild(s);
      }

      function easeOut(t) {
        return 1 - Math.pow(1 - t, 3);
      }

      let elapsed = 0;

      const timer = setInterval(() => {
        elapsed += TICK_MS;
        const raw = Math.min(elapsed / TOTAL_MS, 1);
        const pct = Math.round(easeOut(raw) * 100);

        fillEl.style.width = pct + '%';
        pctEl.textContent = pct + '%';

        const msg = messages.filter(m => pct >= m.at).pop();
        if (msg && textEl.textContent !== msg.text) {
          textEl.style.opacity = 0;
          setTimeout(() => {
            textEl.textContent = msg.text;
            textEl.style.opacity = 1;
          }, 180);
        }

        if (elapsed >= TOTAL_MS) {
          clearInterval(timer);
          root.classList.add('exiting');
          setTimeout(() => {
            window.location.href = DESTINATION;
          }, 650);
        }
      }, TICK_MS);
    })();
  </script>
</div>